HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
HTML
-
HTML就是超文本标记语言（HyperText Markup Language，简称 HTML）
-
HTML 是一门标记语言，标记语言由一套标记标签组成，学习 HTML，其实就是学习标签
-
开发工具：
- 编辑器 ： Pycharm
- 浏览器 ：Chrome、Firefox -
用pycharm：新建->html film->文件名
#文档类型，在HTML文档最前面声明为 HTML5 文档 <!DOCTYPE html> <html lang="en"> #根标签，元素是 HTML 页面的根元素 <head> #网页头部，元素包含了文档的元（meta）数据 <meta charset="UTF-8"> #定义网页编码格式为 utf-8 <title>Title</title> #网页标题 </head> #网页头部结束 <body> #网页主体，元素包含了可见的页面内容 </body> #网页主体结束 </html> #根标签结束
标签
- 由尖括号包裹单词构成，eg：<html>,所以标签不可能以数字开头
- 标签不区分大小写，推荐小写
- 标签可以嵌套，但不能交叉嵌套
错误示例：<a><b></a></b>
正确示例：<a><b></b></a>
- <b></b>，<strong></strong>加粗标签
- <i></i>斜体标签
- <s></s>删除线
- <del></del>删除线
- <hr>分割线
- <br>换行
demo
<p>段落标签</p>
<a href="http://www.baidu.com" target="_blank" title="点我去百度">超链接</a>
<h6>标题标签</h6>
<b>我是加粗</b><br>
<strong>我也是加粗</strong><br>
<i>我是邪（恶）的</i><br>
<hr>
不要<s>998</s>只要668 <br>
不要<del>998</del>只要668 <br>
<!--src是图片路径，alt是图片加载失败出现的提示-->
<img src="http://image.baidu.com/search/detail?ct=50331" alt="哎呀出错了！">
<!--action是提交地址,method提交方式-->
<form action="https://www.baidu.com" method="get" >
<!--fieldset是分块-->
<fieldset>
<legend>我是第一块</legend>
搜索 <input type="text" name="query">
</fieldset>
<fieldset>
搜索 <input type="text" name="1">
</fieldset>
<!--label方便选择，点前面的男女标签就可以选择-->
<label for="in1">男</label>
<label for="in2">女</label>
<input type="radio" name="gender" id="in1">男
<input type="radio" name="gender" id="in2">女
<input type="submit" value="提交"> <br>
<!--display：inline-block是内联标签，想要内联的标签都要设置-->
<p style="display: inline-block">我是一段话</p>
<p style="display: inline-block">我是一段话1</p>
</form>
<!--table也可以用快捷方式创建，table>tr*2>td*4加上tab键-->
<table>
<tr>
<td>周一</td>
<td>周二</td>
<td>周四</td>
<td>周五</td>
</tr>
<tr>
<td>正课</td>
<td>正课</td>
<td>正课</td>
<td>解答</td>
</tr>
</table>
<!--调整单元格与单元格之间的外间距（cellspacing="0px"意思是单元格与单元格之间的外间距是0个像素格，即完全连接，没有空隙）-->
-
css
td{ border: blueviolet solid 2px; }
标签使用样式及属性
标签使用样式：
1. 开始标签<a >标签体</a>结束标签
2. 自闭合标签，eg：<br>,<hr>,<input>,<img>
标签属性：
- 通常为键值对形式出现，eg：color=“red” id = ‘eat’
- 属性只能出现在开始标签和自闭合标签内
- 属性名字全部小写，属性值必须用单引或者双引包裹
- 如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）
html文件各部分标签详解--
- 块级标签和内联标签：
-
块级标签：
<p>/<h1>/<table>/<ol>/<ul>/<form>/<div> -
内联标签：
<a>/<input>/<img>/<sub>/<sup>/<textarea>/<span> -
块级元素的特点：总在新行上开始高度，行高以及外边距和内边距都可控制宽度缺省，则是它容器的100%它可以容纳内联元素和其他块元素
-
inline元素特点：和其他元素在一行上高，行高以及外边距和内边距不可改变宽度就是其文字或图片宽度，不可改变内联元素只能容纳文本或者其他内联元素
-
行内元素注意：
- 设置宽度width无效
- 设置高度height无效
- 设置margin只有左右margin有效，上下无效
- 设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影响的。
-
常用标签之块级标签
- 标题标签(header):<h>
一般用在文章的标题，有h1~h6
- 段落标签(paragraph):<p>
会把 HTML文档 分割成若干段落
- 列表标签:列表标签分为：有序列表、无序列表以及定义列表
- 有序列表：
<!--有序列表-->
<!--快捷方式：ol>li*n加上tab键，得到n个li-->
<ol>
<li>monday</li>
<li>tuesday</li>
<li>wednesday</li>
<li>thursday</li>
</ol>
- 无序列表：
<!--无序列表-->
<!--快捷方式：ul>li*n加上tab键，得到n个li-->
<ul>
<li>na</li>
<li>jy</li>
<li>ww</li>
<li>zj</li>
</ul>
- 自定义列表
<!--定义列表-->
<!--自定义列表不仅仅是一列项目，而是项目及其注释的组合。-->
<!--自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。-->
<dl>
<dt>coffee</dt>
<dd>black</dd>
<dd>hot</dd>
<dd>drink</dd>
<dt>milk</dt>
<dd>white</dd>
<dd>hot</dd>
<dd>drink</dd>
- div标签:用于分化一个一个的区域
常用标签之行内标签
- 图形标签：用于向页面插入图片
图形标签<img/>：插入图片
<img src="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%B0%8F%E6%88%BF%E4%B8%9C%E6%B0%B4%E7%81%B5&step_word=&hs=0&pn=41&spn=0&di=60723209582&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=615309639%2C632769197&os=456631655%2C2805317137&simid=3157452751%2C3741260493&adpicid=0&lpn=0&ln=1954&fr=&fmq=1545065022781_R&fm=result&ic=&s=undefined&hd=&latest=©right=&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fr1.ykimg.com%2F054104085247ED856A0A4A3DE8AE7A52&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3By57h7_z%26e3Bv54AzdH3Frswystfp_fi5oAzdH3Ft1_9andmmc_z%26e3Bip4s%3Frw2j%3D8%26451j%3Drtv%26wfvjg1tg2%3D8&gsm=0&rpstart=0&rpnum=0&islist=&querylist=&selected_tags=0" alt="图片不见了！">
<img src="图片地址"alt="下载失败时的替换文字"title="提示文本"/>
<!--src:标志图像的位置-->
<!--alt:下载不成功时，可看到该属性指定文本-->
<!--title:鼠标滑过图片时显示的文本-->
<!--图像可以是：GIF，PNG，JPEG格式图像文件-->
- 粗体/斜体标签：粗体标签将文字加粗，斜体标签将文字倾斜
- 超链接标签：超链接标签其实就是 a 标签，一般用于网页之间的跳转，还能做锚点，进行跳转
超链接标签<a>: <a href=“目标网址” title=“鼠标滑过显示的文本” target=“_blank”>链接显示的文本</a> ：实现网页跳转和本页内跳转（要注意目标网址的区别）
<a href="https://www.baidu.com"title=""target="_blank"></a><br />
- <br />和<p>的区别：
首先，相同之处是br和p都是有换行的属性及意思
其次，区别<br />是只需一个单独使用，而<p>和</p>是一对使用
再次，br标签是小换行提行，p标签是大换行（分段）各行作用。
#在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
- 文字标签：Span 标签是单纯的文字标签，只有配合 CSS 才能有效果
特殊符号
特殊符号就是网页上一些比较特殊的符号
有时候我们需要特殊符号，比如，我要把html代码显示在页面
特殊符号以 & 开头，分号结尾
< > " © ® &
< > " © ® &
< >
#< > nbsp是空一个空格
< >
#< > emsp是空一个字符
表格
表格其实就是大家平时看到的二维表，比如Excel表格之类
表格布局火于90年代，如今一般用于后台展示数据
表格分为表头，表身和表脚
table表格标签thead表头标签tbody表身标签tfoot表脚标签
表格标题caption合并行rowspan合并列colspan
<tr>:行，<td>：列
<tr colspan="2"> #合并两行，合并后把多余的删去
<td rowspan="3"> #合并三列，合并后把多余的删去
表单
表单：表单是搜集用户数据信息的各种表单元素的集合区域
表单的作用：用于收取用户数据并向后台发送，前后交互的方式之一
表单的应用：表单常应用于 登录注册，搜索，文件上传等
action：提交时候的地址，默认使用当前页面
method：提交时候的方法，有get和post两种方法，默认使用get
entype：设置编码格式 有三种，默认：application/x-www-form-urlencoded
上传文件：multipart/form-data，不建议使用：text/plain
<form action="地址"method="get"></form>
表单中常用标签
input：表单中使用频率最高的标签
1. name属性：表单提交项的键， 与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用
2. value属性:表单提交项的值
3. input标签中不同type，value值的不同
文本框<input type="text"value="可输入的最大长度">
提交按钮 <input type="submit"value="提交">
普通按钮 <input type="button"value="普通按钮">
密码框<input type="password">
重置按钮<input type="reset"value="重置">
单选按钮<input type="radio"name="性别："value="男"> #name必须设置成一样的，表示是一组单选按钮，checked=“男”则默认选“男”
文件上传域<input type="file">
多选按钮<input type="checkbox"name="爱好："> #name可以设置成不一样的，要求设置成一样的
下拉框<select name="地址：" >
<option value="长沙">长沙</option>
<option value="武汉">武汉</option>
<option value="杭州">杭州</option>
<option value="北京">北京</option>
<option value="哈尔滨">哈尔滨</option>
</select>
多行文本域<textarea cols="列" rows="行"></textarea>
隐藏域<input type="hidden" >
图片按钮<input type="image"src=""onmouseover>
type="button"/"reset"/"submit"--定义按钮上显示文本
type="text"/"password"/"hidden"--定义输入字段初始值
type="checkbox"/"radio"/"image"--定义与输入
textarea：文本域，一般用于多行文本
select：下拉框，一般用于选项
-
练习：做出如图的表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>xiaoge</title> </head> <body> <form action="www.sougou.com/web"method="get"></form><br> 用户名：<input type="text"name="用户名"placeholder="请输入用户名："><br> 密 码：<input type="password"name="密码"placeholder="请输入密码："><br> <!--checked="checked"表示默认，默认性别为男--> <!--加name属性后实现一组单选效果，一组的name名一样--> 性 别：<input type="radio"name="sex"value="男"checked="checked">男<input type="radio"name="sex"value="女">女<br> 爱 好：<input type="checkbox"name="hobbies">唱歌<input type="checkbox"name="hobbies">跳舞<input type="checkbox"name="hobbies">画画<br> 上传文件：<input type="file"name="file"><br> 地 址：<select > <optgroup label="黑龙江"> <option value="1">肇东</option> <option value="1">哈尔滨</option> <option value="1">齐齐哈尔</option> <option value="1">牡丹江</option> </optgroup> <optgroup label="山东"> <option value="1">烟台</option> <option value="1">潍坊</option> <option value="1">青岛</option> <option value="1">威海</option> </optgroup> </select><br> 简 介：<textarea cols="30" rows="10"></textarea><br> <input type="submit"value="提交"> <input type="reset"value="重置"> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
