前端基础——HTML

一、HTML网页结构

　　1.文档声明：（新版HTML的声明）

<!DOCTYPE html>

　　2.头部：title,  base,  link,  meta,  script,  style等常用标签

<head>
    <meta charset="UTF-8">
    <title>bootstrap的js插件</title>
    <!-- 引入外部的css文件-->
    <link rel="stylesheet" href="bootstrapcssootstrap.min.css">
    <!-- 先引入jQuery，再引入js-->
    <script src="bootstrapjsjquery.min.js"> </script>
    <script src="bootstrapjsootstrap.min.js"> </script>
</head>

　　//例如文档的声明编码，文件本身的编码（使用editplus可以方便的修改）

　　3.主体：

<body>
    
</body>

 　　4.注释：

　　HTML—— <!--HTML注释 -->

　　CSS—— /*CSS注释*/

　　JS——//单行注释　　/*段注释*/

二、基本标签

　　1.标题标签 <h1>~<h6>，数字越小，字体越大

　　站长之家权重查询（0-10等级划分）：http://rank.chinaz.com/

　　一般而言，一个网页使用一个<h1>（多个将会被百度认为作弊行为），<h5><h6>已经基本不用

　　2.段落标签 <p>　　行内标签<span>

　　<span>标签是无语义的标签，作用是单独设置样式的。

　　<i>：斜体，通常用于区域块中引入小图标（<em>也可用于文本斜体，也是强调斜体语义）　　

　   <b> ：粗体（<strong>用于强调关键字等强调作用），一般都是在文本中（<p>段落中）嵌套使用

 　　3.盒子 <div>

　　网页常用样式：（标签都会有一些默认的边距等）

　　　　外边距：margin　　内边距（填充）：padding　　

　　　　边距方向：上 ,右, 下, 左（0px,0px,0px,0px）　　上下 , 左右（0px,0px）

　　　　边框：border　宽度：width　　高度：height

　　　　实例：

<div style=" 350px;height: 300px;border: 2px solid red">
        <div style=" 150px;height: 100px;border: 3px solid green; margin:30px 40px">
            内部DIV
        </div>
    </div>

 　　一般而言，可以设置通用的边距来避免默认的边距问题：

　　<style type="text/css">
        *{margin: 0px;padding: 0px}
　　　　/*只设置div盒子的边距：html,body,div{margin: 0px;padding: 0px}*/

    </style>

　　4.字体标签 <font>　　——h5已经规定不再使用！由CSS的font样式代替

　　设置颜色，字体，大小等

<font color="red" size="24" face="微软雅黑">我的字体</font>

　　5.超链接 <a>

　　一个是常规的 页面跳转： <a href="#"><a>

　　一个是用来做锚点导航：<a name="m">锚点</a>　　<a href="#m"></a>

　　常用的属性：如打开的页面是否为本页，链接标题等，请参见w3school

　　 <a href="#computer">电脑</a>
    <a href="#phone">手机</a>
    <div style=" 100%;height: 600px;border: 2px solid red">
        <a name="phone">手机</a>
    </div>
    <div style=" 100%;height: 600px;border: 2px solid red">
        <a name="computer">电脑</a>
    </div>

　　伪类：通过样式修改超链接点击后的状态（例如点击前后颜色等）：

link 未访问（默认） hover 鼠标悬停（鼠标划过） active 链接激活（鼠标按下） visited 访问过后（点击过后）

<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">
        a:link{color: red;}
        a:hover{color: green;}
    </style>
</head>

 　　6.图片标签 <img>

　　常用属性：src　　alt（图片加载失败提示文本）　　title（图片提示信息）　　

 　   7.预格式 <pre>

　　8.文本域 <textarea>

　　宽高样式请不要通过 cols rows属性，请使用CSS样式进行代替

　　9.内框架 <iframe>

　　10无序列表 <ul> <li>——ul标签中应当只存在 li 为子元素！（嵌套请嵌套在li中）

　　去掉列表的小圆点：.nav ul li{list-style: none;}

　　一般用导航栏的话可以使用ul生成一个，之后的动态循环生成即可，而使用 a 标签则写法不灵活，改变布局不方便

　　常用转义符：

　　　　空格——&nbsp;

　　　　尖括号——< &lt;　　>&gt;

　　块级标签与行内标签转换：

　　　　通常块级标签可以由width等来设置宽高，而行内标签通常由内容进行撑开

　　　　dispaly:bolck　换行的块级　display:inline-block　　不带换行的块级

　　　　转换为块级标签后便可以直接使用width进行宽高设置了（实例见导航实例）

　　无序列表——导航实例：

　　基础 a 标签版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px}
        .top{width: 80%;height: 45px;background: #808080;margin:45px 60px;}
        .top .nav a{font-size: 16px;color:#FFF;font-family: "微软雅黑";
                    /*消除超链接下划线*/text-decoration:none;
                    display: block;width: 100px;height: 10px;float: left;
                    text-align: center;line-height: 45px}
        .top .nav{width: 450px;height: 45px;margin-left: 80px}    
        .top .nav a:hover{color: #696969    }        
    </style>
</head>
<body>
    <!--导航 开始-->
    <div class="top">
        <div class="nav">
            <a href="#">Java</a>
            <a href="#">Python</a>
            <a href="#">C++</a>
            <a href="#">Hadoop</a>
        </div>
    </div>
    <!--导航 结束-->
</body>
</html>
View Code

 　　常用 li 标签版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">
        html,body,div{margin: 0px;padding: 0px}
        .nav{width: 100%;height: 45px;background: #808080;margin:45px 60px;}
        .nav ul li{list-style: none;display: inline-block;width: 80px;text-align: center;padding: 0px 15px;}
        .nav ul li a{text-decoration: none;font-size: 16px;color: #FFF;font-family: "微软雅黑";text-align: center;line-height: 45px;}
        .nav ul li a:hover{color: black;}
    </style>
</head>
<body>
    <!--导航 开始-->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我</a></li>
                <li><a href="#">心路历程</a></li>
                <li><a href="#">技术分享</a></li>
            </ul>
        </div>
    <!--导航 结束-->
</body>
</html>
View Code

 　　二级小导航：

<!doctype html><!--网页文档头部文档声明 doc=document(文档)，type(类型)-->
<html><!--主体开始-->
    <!--网页头部区域-->
    <head>
        <!--声明当前页面的编码集charset=utf-8,中文编码集(gbk,gb2312),国际编码集(utf-8)-->
        <meta charset="utf-8" /><!--元信息标签 声明编码集-->
        <!--声明当前页面文档三要素-->
        <!--标题-->
        <title>努力_幸运-凡事都不愿意将就</title>
        <!--关键字-->
        <meta name="Keywords" content="web前端" />
        <!--描述-->
        <meta name="Description" content="一定要把Web前端学好学出色" />

        <!--base,link,style,script-->
        <style type="text/css">
            html,body,div,ul,li,a{margin:0px;padding:0px;}/*初始化标签默认的边距*/
            .nav{width:248px;height:35px;margin:50px 0 0 30px;border:2px solid red;}
            .nav ul li{width:120px;height:35px;float:left;text-align:center;/*文本水平居中*/line-height:35px;/*文本垂直居中*/list-style:none;margin:0 1px;}
            .nav ul li a{color:#fff;width:120px;height:35px;display:block;background:#000;
            text-decoration:none;/*消除文本下划线*/}

            /*sel-style*/
            /*
                .nav ul li .sel li
                首先找到.nav导航盒子，再找里面的无序列的列表项，再找列表项里面的无序列表
            */
            .nav ul li .sel li{width:120px;height:35px;font-size:12px;text-align:center;
            line-height:35px;background:#ff9966;/*背景颜色*/margin-bottom:2px;}
            .nav ul li .sel{display:none;/*隐藏*/}
            .nav ul li:hover .sel{display:block;/*显示*/}
            .nav ul li .sel li:hover{background:#cc99ff;}
            
        </style>
    </head>

    <!--网页身体区域-->
    <body>
        <!--导航区块 开始-->
        <div class="nav">
            <ul>
                <li>
                    <a href="#">web前端</a>
                    <ul class="sel">
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                    </ul>
                </li>
                <li>
                    <a href="#">Java</a>
                    <ul class="sel">
                        <li>HTML/CSS/JavaScript</li>
                        <li>JEE</li>
                        <li>Oracle</li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--导航区块 结束-->
    </body>
</html><!--主体结束-->
View Code

 　　11.有序列表 <ol>

　　列表默认都是垂直显示。

　　序号类型：<ol type="a">等来控制。

　　其它属性请参考w3school

　　12.表格标签 <table>

　　包含<tbody> <tr> <td>等常用标签；

　　caption标签，为表格添加标题和摘要

　　13.表单标签 <form>

　　常用属性：action　　method

　　常用表单标签：

　　　　文本框：<input type="text"/>

　　　　密码框：<input type="password"/>　

　　　　单选复选框：<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
　　　　下拉框：<select>
　　　　提交：<input type="subbmit" />

　　　　重置：<input type="reset" />

　　　　<label>标签绑定控件：

　　　　　　<label for="male">男</label>
　　　　　　<input type="radio" name="gender" id="male" />

　　　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jiangbei/p/7470280.html