html+css基础学习（认识html及css选择器）2019年1月14日 22点00分 - html&css学习

首页 > 博客列表 > html+css基础学习（认识html及css选择器）2019年1月14日 22点00分

博主信息

博文 8

粉丝 0

访问量 6149

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 外链CSS地址href -->
    <link rel="stylesheet" href=""> 
    <!-- 外链js地址src  -->
    <script src=""></script>
    <!-- 标题图标设置 href-->
    <link rel="shortcut icon" href="">
    
    <title>标题标签</title>
</head>
<body>
用户可见内容区域
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二.html标签

1.标签类型单标签(img,br,hr) 双标签(p,h1-h6,div,span)

2.常用标签

1.标题(h1-h6) 段落(p)

h标签 p标签实例

            <h1>我是h1标签</h1>
            <h2>我是h1标签</h2>
            <h3>我是h1标签</h3>
            <p>我是标题p标签</p>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.文本修饰（em斜体，strong加粗，u下划线）

文本修饰标签实例

<p><em>我是</em><strong>一段</strong><u>实例文字</u> </p>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3.列表（无序列表ul>li　有序列表ol>li 　自定义列表　dl>dt(标题)>dd(解释内容)

无序列表实例

                <ul>
                    <li>吃饭</li>
                    <li>睡觉</li>
                    <li>打游戏</li>
                </ul>

运行实例 »

点击 "运行实例" 按钮查看在线实例

有序列表实例

                <ol>
                    <li>中国</li>
                    <li>美国</li>
                    <li>俄罗斯</li>
                </ol>

运行实例 »

点击 "运行实例" 按钮查看在线实例

自定义列表实例

                <DL>
                    <dt>友情链接</dt>
                    <dd>百度</dd>
                    <dd>腾讯</dd>
                    <dd>网易</dd>
                </DL>

运行实例 »

点击 "运行实例" 按钮查看在线实例

4.表格　table表格　caption标题　thead表头　tbody表体　tfoot tr行 th表头格 td单元格

表格实例

<table border="1px">
                    <caption>购物清单</caption>
                    <thead>
                        <th>序号</th>
                        <th>名称</th>
                        <th>数量</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>苹果</td>
                            <td>2</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>笔记本电脑</td>
                            <td>1</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>电视</td>
                            <td>1</td>
                        </tr>
                    </tbody>
                </table>

运行实例 »

点击 "运行实例" 按钮查看在线实例

5.表单　

1.表单是最重要的交互工具，用户可以通过表单，将数据提交到后端服务器上进行处理

2.表单涉及：from表单, label特定表单控件关联,input输入数据空间（type的值改变输入方式）,select（下拉列表）,button（按钮）标签

表单实例

<form action="xxx.php" method="GET">
                <!-- action 提交地址   method提交方式 -->
                <!-- lable绑定id关联input组件或内嵌 -->
                    <div>
                        <label>用户名：<input type="text" name="username" placeholder="请输入账号"></label>
                    </div>
                    <div>
                        <label for="password">密码：</label>
                        <input type="password" id="password" placeholder="请输入密码">
                    </div>
                    <!-- 单选框 关联name值成组  checked默认选择项 -->
                    <div>
                            <input type="radio" name="gender" value="male" id="male" checked>
                            <label for="male">男</label>
                            <input type="radio" name="gender" value="female" id="female">
                            <label for="female">女</label>
                    </div>
                    <!-- 复选框  name提交值是数组 -->
                    <div>
                        <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label>
                        <input type="checkbox" name="hobby[]" value="eat" id="eat"><label for="eat">吃东西</label>
                        <input type="checkbox" name="hobby[]" value="lvyou" id="eat" checked><label for="eat" >旅游</label>
                    </div>
                    <!-- 下拉列表  value是提交给服务器的数据 -->
                    <label for="map">选择省份：</label>
                    <select name="map" id="map">
                        <option value="1">湖北省</option>
                        <option value="2" selected>广东省</option>
                        <option value="3">湖南省</option>
                        <option value="4">云南省</option>
                    </select>

                    <!-- 文本域  -->
                    <div>
                        <label for="liuyan">留言板</label>
                        <textarea name="liuyan" id="liuyan" cols="30" rows="10" placeholder="请输入文字"></textarea>
                    </div>
                    <!-- 提交重置按钮 -->
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                    <!-- button可与JS交互 -->
                    <button tape="button">提交</button>
                    
                </form>

运行实例 »

点击 "运行实例" 按钮查看在线实例

三. css

1.样式规则=选择器+声明

QQ截图20190115153135.png

2.选择器优先级标签<class<id<内联（行内）样式

3.选择器的优先权解释说明

内联样式表的权值最高 1000。

ID 选择器的权值为 100。

Class 类选择器的权值为 10。

HTML 标签（类型）选择器的权值为 1。

4.盒子模型

1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子

2. 盒子默认都是块级元素: 独占一行,支持宽度设置

(根据盒子模型示意图分析)

3. 盒子模型分为三个层级:

1. 内容级: 宽高和背景三个属性

(1): width

(2): height

(3): background-color (默认透明)

2. 元素级(可视范围)

(1): 包括内容级(width + height + background)

(2): 内边距: padding

(3): 边框: border

3. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关

小知识:

<title>与<h>的区别（h1-h6标签，h1是h标签当中权重最高的(所以这里就拿h1标签来说)）：

title是用在网页当中的标题，h1标签是用在文章当中的标题；
title标题是给搜索引擎看的，h1标签的内容是给用户看的；
title标签分的seo（Search Engine Optimization搜索引擎优化）权重非常大，因此一般主关键字都是放到title标签内优化的。h1标签分的seo权重次于title标签，一般长尾关键字用此标签，比如文章标题（h2-h6以减小）。

总结：

1.学习html 就是学习标签。

2.多练习熟悉标签的使用。

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html+css基础学习（认识html及css选择器）2019年1月14日 22点00分

2019-01-18 19:50:18

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

实例

h标签 p标签 实例

文本修饰标签 实例

无序列表 实例

有序列表 实例

自定义列表 实例

表格 实例

表单 实例

h标签 p标签实例

文本修饰标签实例

无序列表实例

有序列表实例

自定义列表实例

表格实例

表单实例