HTML基础

时间:2019-07-04
本文章向大家介绍HTML基础,主要包括HTML基础使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

标签

标签的基本内容

  1.由<>包裹、字母开头、可以结合数字和合法字符的能被浏览器解析的标记

    合法字符:字母、数字、-

  2.标签是有语义的

    <br>:换行  <hr>:分隔线

  3.标签是有作用范围的

    <h1>中间就是标签的作用范围,由标签来控制,具有默认样式</h1>

  4.标签可以修改内容样式

    <p style = "color: red">000</p> 就可以把中间的文本字体改成红色

标签分类及常用标签

标签有单双标签之分:

  --.单标签无需内容,主(功能),可以省略标签的结束符/ 

    eg:<br/> 可以省略成 <br>

  --.双标签主(内容),需要有作用域,必须明确结束标签

    <a></a>    开始结束标签之间就是他的作用域

常用标签

页面结构相关的系统标签
1.页面根标签:<html></html>
2.页面头标签:<head></head>
3.页面体标签:<body></body>
4.页面标题标签:<title></title>
5.元标签:<meta >
6.链接标签:<link >
7.样式标签:<style></style>
8.脚本标签:<script></script>

简单的系统标签
1.标题标签:<h1></h1> ....<h6></h6>
2.段落标签:<p></p>
3.换行标签:<br >
4.分割线标签:<hr >
5.行文本标签:<span></span>
6.斜体标签:<i></i>
7.加粗标签:<b></b>
8.图片标签:<img src="图片源" alt="图片加载失败显示内容">
9.超链接标签:<a href="链接地址"></a>
10.架构标签:<div></div>

复杂的系统标签
1.无序列表标签:<ul><li></li></ul>
2.表格标签:<table>包含大量的表格子标签</table>
    每一行用<tr></tr>标签包裹
    tr标签中th标签表示标题单元格
            td标签标识内容单元格
3.表单标签:<form action="表单数据提交的后台地址" method="提交方式"></form>
<!DOCTYPE html>
<!-- 文档指令,建议出现在html的最上方,一个文档只出现一次,标识该文档用html5语法进行编写-->
<html lang="en">
<!-- 页面根标签的开始,一个html文件只出现一次 -->
<!-- lang属性表示的是浏览器解析文件的语言,en代表英语,浏览器就会提示翻译 -->
<head>
<!-- 页面头标签的开始,一个html文件只出现一次   -->
    <meta charset="UTF-8">
<!-- 单标签 可以指定文件编码   -->
    <title>Title</title>
<!-- 页面标题标签,用来在浏览器中显示页面标题   -->
    <link rel="icon" href="">
<!-- 设置页面标签图标   -->
    <link rel="stylesheet" href="">
<!--  用来连接外联式的css样式标签  -->
    <style></style>
<!--  用来存放内联式css样式标签  -->
    <script></script>
<!-- 用来存放出现在head中的JavaScript脚本代码标签   -->
</head>
<body>
<!-- 网页中所有展示给用户看的标签及内容存放在这里:普通文本、音频 -->
<!-- 页面中不给用户产看的内容也写在这:如结构标签或者是隐藏的标签 -->
</body>
<!-- 代表页面体的结束,这里一般不写标签,但是这里写的标签都会被放到body中的最后一个-->
</html>

页面结构相关
h1 - h6 标签
<h1>在页面上显示一级标题</h1>
        ......
<h6>在页面上显示六级标题</h6>
p标签
<p>一个页面显示的文本段落放在一个p标签中</p>
br标签
<br> 换行
hr标签
<hr> 分隔线
span标签
<span>普通的文本内容</span>
图片标签
<img src="" alt="" title="">
<!-- src中写的是链接:可以是本地地址,也可以是网络地址 -->
<!-- alt 中写的是加载图片失败后返回的信息 -->
<!-- title 中写的是鼠标放在上面显示的信息,基本上能显示内容的标签都可以设置 -->
超链接标签
<a href="https://www.baidu.com">前往百度</a>
<!-- 点一下超链接标签中文字就可以在当前页面中直接跳转-->
<a href="https://www.baidu.com" target="_blank"></a>
<!-- 加上 target="_blank" 可以实现新开一个窗口前往百度-->
<a name="xxx"></a>
<!-- 也可以通过 name 这种方式给页面种下锚点-->
<a href="#xxx"></a>
<!-- 直接用#对应值就可以实现当前页面内的跳转-->
架构标签
<div></div>
<!-- div标签没有具体的语义,主要被用于页面架构的设计-->

简单系统标签
无序列表
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<!-- 只需要掌握ul 与li 的嵌套关系即可 -->
<!-- ul 中只能嵌套li标签 li标签中可以嵌套任意标签-->
表格标签
<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2"></td>
<!--            <td></td>-->
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>
<!--caption:标签中表示的是表格的标题-->
<!--thead:表示的是表格的头部,中间都是用th标签-->
<!--tbody:表示的是表格身体,中间都是用td标签-->
<!--tfoot:表示的是表格尾部,中间都是用td标签-->
<!--tr:主要用作表格的分行-->
<!--th:标题单元格-->
<!--td:内容单元格-->
注:我们一般都会把thead、tbody、tfoot省略,
    直接用tr、th、td构成表格
想要合并单元格可以直接通过rowspan或者colspan来合并
例如上面直接注掉第二个单元格,把第一个单元格colspan设为2,就显示合并了第一行的一二列单元格
表单标签(重点*****)
<form action="" method="get">
    <label for="">sdasd</label>
    <input type="text" name="user">
    <input type="password" name="password">
    <input type="submit" name="提交">
    <select name="list" id="s1">
        <option value="sss">math</option>
    </select>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button type="submit" value="提交"></button>
</form>
<!-- 标签部分 -->
1.form 表单标签
2.label 普通文本标签
3.input 输入标签,通过type的值来确定输入的具体是什么类型
4.select 表单中的列表标签,option列表选项标签
5.textarea 文本域标签
6.button 按钮标签
<!-- form全局属性 -->
1.action:提交表单数据给后台的地址
2.method:提交数据的方式(get或post)
3.enctype:提交数据的编码格式
<!-- form子标签全局属性 -->
1.type:标签的类型
2.name:将该标签提交给后台表示数据的key,不设置name的标签内容无法提交
3.value:将该标签提交给后台的数据,用户自己输入的可以不设置
<!-- input标签type属性值的分类 -->
1.text:普通文本输入框
2.password:密文文本输入框
3.radio:单选框
4.checkbox:复选框
5.file:文件输入,该类型input标签有个全局属性multiple,属性值省略,代表可以选取文件提交给后台
6.submit:提交表单信息给后台,用value设置提交按钮的显示内容
<!-- button标签type属性值与分类-->
1.button:普通的按钮
2.reset:重置按钮,默认点击后会还原表单的所有操作
3.submit:提交按钮

复杂系统标签

转义字符

像后台开发语言的特殊字符\n一样,会被解析为换行,

html5中也有很多特殊字符数字的组合会被解析为特殊含义。

格式:&nbsp;    (&和; 中间加上字符)

1.空格:&nbsp;

2.字符'':&quot;

更多字符转换:http://tool.oschina.net/commons?type=2

指令

被<>包裹,以!开头的特殊符号,称之为指令

指令中不区分大小写,前端需要掌握两个指令

1.文档指令

  <!doctype html>

2.注释指令

  <!-- -->

$flag 上一页 下一页

上一篇:LeetCode

下一篇:Linux的crond和crontab