标签:content 单行 -- char als 必须 bsp nbsp 多个
HTML是用来描述网页的一种语言。
HTML是指超文本标记语言(不仅包含纯文本,还包含图片、超链接、音频、视频等)。
HTML使用一套标记标签来描述网页。
充当网页骨架。
语义化,使网络爬虫更好的抓取网站信息。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- 作用:配置html文件 --> 5 </head> 6 <body> 7 <!-- 书写标签组成的网页结构 --> 8 </body> 9 </html>
1、DOCTYPE是document type(文档类型)的简写,在网页中用来说明当前使用的XHTML或者HTML是什么版本
2、head是对HTML进行一些附加信息,内容不显示在网页中
3、body是HTML的主体部分,显示在网页中的内容
1、meta标签
<meta charset = "UTF-8" /> 用于声明字符编码级
<meta name="keywords" content = "内容"> 用于提供给搜索引擎关键字
<meta name = "discription" content = "内容"> 用于提供给搜索引擎网页简单描述
2、title标签
标识文档标题,该标题会显示在浏览器的标题栏的标签页上
3、style标签
<style type= "text/css"></style> 编写页面内部样式
4、link标签
<link>:用于引入css样式
<link rel = "stylesheet" href = "index.css">
5、script标签
<script src=index.js"></script>引入外部js文件
1、标签之间对空格,缩进,换行不敏感,浏览器只会当做一个空格处理
2、标签名必须使用一对尖括号包裹,标签一般都是成对出现,单标签除外
常见单标签:<img/> <br/> <hr/>
3、标签属性写法: 键值对形势(key="value")
eg: <img src="1.png" alt="图片" title="我是一张图片"/>
1、块级元素:h1-h6、p、div、ol、ul、dl、form、table等
2、行内元素 a、img、span、strong、em等
块级元素特点:
1、独占一行;
2、高度,行高以及外边距和内边距都可控制;
3、宽度缺省是父容器的宽度,除非设定一个宽度;
4、它可以容纳内联元素和其他块元素。(注意:p标签不可包含div)
行内元素特点:
1、设置宽高无效
2、对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
3、不会自动进行换行
1、h系列(h1-h6)(headline的缩写)
作用:给文本添加标题语义
注意:h系列的标签不能相互嵌套,网页一般只有一个h1标签
2、p(paragragh)段落标签
作用:给文本添加段落语义
注意:p是文本级标签,内部只能书写文本类的内容,比如:文本,图片,表单元素,废弃标签
3、img标签(单标签) <img src="" alt=""/> src:路径,插入图片所在的位置 alt:图片加载失败时显示的文本 width:设置图片的宽度 height:设置图片的高度 注意:宽度和高度一般只设置一个让图片按比例缩放 <img src="images/01.png" alt="图片加载失败,请刷新" width="200px"/>
4、a标签(超链接) href: 属性值书写的是要跳转页面的路径(路径可以为相对路径和绝对路径) target: 属性值设置新页面打开方式 默认值(_self):在当前窗口打开 _blank: 在新窗口打开 title: 悬停提示文本 <a href="#id"></a> 可以进行页面内锚链接跳转
5、列表
5.1无序列表 ul
作用:给文本添加无序列表语义
ul:unordered list 无序列表
li:list item 列表项
注意:
ul和li是第一个成对出现的标签,出现ul一定有li,有li一定被ul包裹
ul内部只能嵌套li不能出现任何其他标签。
5.2有序列表 ol
作用:给文本添加有序列表语义
ol:ordered list 有序列表
li:list item 列表项
每一个列表项之间有顺序之分
ol,li也是一组成对出现的标签,ol一定嵌套li。
ol内部嵌套一个或者多个li
5.3自定义列表
作用:给文本添加自定义列表语义
dl: definition list 自定义列表
dt: definition title 标题
dd: definition description 描述
dl嵌套dt和dd,dt和dd是同级关系,dt是标题,dd是对标题解释说明(dl>dt+dd)
6、表单元素 6.1form 说明:将所有的表单元素都书写在form标签内部 form标签是功能标签不是结构标签 提交位置:action 提交方式:method <form action="1.php" method="get"></form> 表单元素:提供给用户进行输入或者选择控件 属性:type,根据type属性值,有不同的表单类型 6.2单行文本框 <input type="text" name="yonghuming" value="用户名" /> 6.3密码框 <input type="password" name="mima" /> 6.4单选框 <p> 请选择性别: <input type="radio" name="sex" />男性 <input type="radio" name="sex" checked="checked" />女性 </p> 说明: type属性值:radio 同一组单选框,必须设置相同的name属性值 checked: 设置表单被选中checked 6.5复选框 请选择爱好: <p> <input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">学习</label> <input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label> </p> 说明:type属性值:checkbox 同一组复选框,必须设置相同的name属性值 也具有checked属性 可以使用label标签
b,u,i,em,strong(文本级标签)
b: 默认加粗
u: 默认下划线
i: 默认倾斜
em:语义加强,倾斜
strong: 语义加强,加粗
废弃原因:没有语义
1、HTML5 Geolocation:获取地理位置
2、HTML 拖放
3、web存储:localStorage、sessionStorage(常用)
4、应用缓存
5、 Web Worker
6、SSE 服务端推送技术(比websocket更轻,有些情况可以替代ws)
标签:content 单行 -- char als 必须 bsp nbsp 多个
原文地址:https://www.cnblogs.com/zhaojian-08/p/11755997.html