HTML标签

1.了解HTML文档结构

2.掌握并熟练使用HTML标签：

（1）HTML 标签一般配对使用，不区分大小写

（2）标签都具有属性。属性提供关于网页上 HTML 元素的附加信息

（3）META 标签放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签

（4）标题级标签使用<H1>-<H6>：用于指定不同级别的标题

（5）无序列表使用<UL>标签,有序列表使用<OL>标签

（6）超链接标签<a href=“#”>超链接文本</a>

（7）<div></div>//块级元素 构建网站的主心骨 用div搭建网站的框架

3.表格举例

主要代码：<table border="1" width="800" cellspacing="0">
    <caption>学生课程表</caption>
    <tr>
        <td colspan="2">节次</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <!--<td colspan="2">2</td>
        <td>4</td>-->
    </tr>
    <tr>
        <td rowspan="2">上午</td>
        <td>第一二节</td>
        <td>数据结构</td>
        <td></td>
        <td>数据结构</td>
        <td>JAVA Web开发技术基础</td>
        <td>大学英语</td>
    </tr>
    <tr>
        <td>第三四节</td>
        <td>数据库原理及应用</td>
        <td>计算机组成原理</td>
        <td>数据库原理及应用</td>
        <td>计算机组成原理</td>
        <td>JAVA Web开发技术基础</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>第五六节</td>
        <td>大学英语</td>
        <td>大学体育</td>
        <td></td>
        <td>马克思主义基本原理概论</td>
        <td></td>
    </tr>
    <tr>
        <td>第七八节</td>
        <td></td>
        <td></td>
        <td></td>
        <td>马克思主义基本原理概论</td>
        <td></td>
    </tr>
</table>

效果图：

4.表单举例

主要代码：

<form action="index.html" method="get">
    <ul>
        <li><lable for = "nick">文本框：</lable><input name = "nick" maxlength="11" value="请输入..." type="text"></li>
        <li><lable for = "pwd">密码框：</lable><input name = "pwd" type = "password"></li>
        <li><label for = "ck">复选框：</label><input name = "ck" value="10" type="checkbox"></li>
        <li><label for = "sex">单选框：</label><input type="radio" checked name="sex" value="0">男<input name = "sex" value="1" type="radio">女</li>
        <li><label>普通按钮：</label><input type="button" value="按钮"></li>
        <li><label>提交按钮：</label><input type="submit" value="注册"></li>
        <li><label>重置按钮：</label><input type="reset" value="清空"></li>
    </ul>
</form>
<!--多行文本框-->
<textarea></textarea>
<!--下拉菜单-->
<!--selected 默认选择 类似于checked-->
<select>
    <option>-请选择-</option>
    <option value="0" selected>-西安市-</option>
    <option value="1">-咸阳市-</option>
    <option value="2">-宝鸡市-</option>
</select>

效果图：

5.样式：

（1）样式分为行内样式、内嵌样式、外部样式

（2）样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类

（3）样式的优先级问题：样式优先级：就近原则（行内优先）；如果行内样式和内嵌样式和外部样式没有冲突，则叠加使用；如果冲突考虑样式的优先级，则行内>内嵌>外部

6.京东首页导航栏

主要代码：

<div class = "jd_contarin">
    <div class="top_title">
        <a href="#" class="logo"><img src="./image/5b0fc1ddN7fe1616c.gif" alt=""></a>
        <span class="address"><i class = "iconfont s_p" style="margin-right: 5px">&#xf014a;</i>北京</span>
        <ul class = "top_menu_right">
            <li><a href="#">你好，请登录</a></li><span>|</span>
            <li><a href="#" id="u_l">免费注册</a></li><span>|</span>
            <li><a href="#">我的订单</a></li><span>|</span>
            <li class="d_f"><a href="#">我的京东</a><i class="iconfont z_i">&#xf02a9;</i></li><span>|</span>
            <li><a href="#">京东会员</a></li><span>|</span>
            <li class="d_f"><a href="#">企业采购</a><i class="iconfont z_i">&#xf02a9;</i></li><span>|</span>
            <li class="d_f"><a href="#">客户服务</a><i class="iconfont z_i">&#xf02a9;</i></li><span>|</span>
            <li class="d_f"><a href="#">网页导购</a><i class="iconfont z_i">&#xf02a9;</i></li><span>|</span>
            <li><a href="#">手机京东</a></li>
        </ul>
    </div>
</div>

css代码：

*{
    margin: 0;
    padding: 0;
}
html,body{
    background-color: #F0F3EF;
    font-size: 14px;
}
.jd_contarin{
    width: 1200px;
    height: 8000px;
    border: 1px solid silver;
    margin: 0 auto;
}
.logo{
    width: 190px;
    height: 170px;
    position: absolute;
    display: block;
    box-shadow: 0px -5px 10px grey;
}
.top_title{
    background-color: #E3E4E5;
    height: 30px;
    line-height: 30px;
    color: grey;
    font-size: 13px;
}
.top_menu_right{
    float: right;
}
.top_menu_right>li{
    list-style: none;
    float: left;
    height: 30px;
    padding: 0 7px;
}
.top_menu_right>span{
    float: left;
}
.top_menu_right>li>a{
    text-decoration: none;
    color: silver;
}
.top_menu_right>li>a:hover{
    color: #d0112e;
}
#u_l{
    color: red;
}
.z_i{
    margin-left: 3px;
}
.d_f:hover{
    background-color: white;
}
.s_p{
    color: red;
}
.address{
    margin-left: 200px;
    display: inline-block;
    border-left: 1px solid #E3E4E5;
    border-right: 1px solid #E3E4E5;
    padding: 0 10px;
}
.address:hover{
    background-color: white;
    border-color: silver;
}

效果图：