1.HTML开发环境
pycharm中编辑html代码
2.HTML标签
1.标签使用英文的<>，如<html lang="en">,<head>
2.标签通常是成对出现，如<div><h1>wwwwww</h1></div>
3.标签是可以嵌套的，如<div><h1>wwwwww</h1></div>，但不是所有标签都支持相互嵌套
4.标签不区分大小写，通常都是用小写3.HTML文档结构
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
说明：
1.<!DOCTYPE HTML>是文档声明，必须写在第一行，表明是HTML文档
2.<head>...</head>是头部标签
常见的头部元素有<title>,<meta>,<link>,<style>,<script>
3.<body>...</body>是网页的主要内容，有<div>,<h1>等，会在浏览器中显示出效果
4.HTML注释
1.快捷键 ctrl + /可快速出现注释
<!--ctrl + /可快速出现注释-->
<!--写下div 按下tab，可快速生成一对div-->
2.注释中可直接使用回车换行
3.习惯用注释把HTML代码包裹起来
<!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->
4.HTML注释不支持嵌套
5.HTML注释不能写在HTML标签中5.head标签
描述了文档的各种属性和信息
包含文档标题、编码方式及URL等信息<head lang='en'>
<!-- 标题-->
<title>标题信息</title>
<!-- 编码-->
<meta charset="UTF-8">
<link>
<!-- icon图标(网站的图标-即网站Title旁边的图片)-->
<link rel="icon" href="fav.ico">
<!-- 引入外部样式css文件-->
<link rel="stylesheet" href="mystyle.css">
<!-- 内部样式表-->
<style type='text/css'></style>
<!-- 引入外部js文件-->
<script type='text/javascript'></script>
</head>下图就是网站图标处
5.1meta标签
1.meta标签中提供的信息是用户不可见的
2.meta标签有两个属性，http-equiv和name"http-equiv属性"
帮助浏览器正确的显示网页内容，与之对应的属性值为content
<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">"name属性"
用于页面的关键字和描述，是写给搜索引擎看的
关键字可以使用多个,隔开，与之对应的属性值是content
content中的内容是便于搜索引擎机器人查找信息和分类信息用的
<meta name="keywords" content="我的商城，手机，电脑，笔记本">
<meta name="description" content="我的商城">6.body标签
6.1标题-h1-h6
1.标题标签用于制作文章或网站的标题
2.不能通过标题标签来设置文章中内容的字体大小
3.被标题标签设置的内容会独立放在一行<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
6.2文本内容标签
1. <b></b>：加粗
2. <i></i>：斜体
3. <u></u>：下划线
4. <s></s>：删除线
5. <sup></sup>：上标
6. <sub></sub>：下标
7. <em></em>：内容强调，斜体
8.<strong></strong>：内容强调，加粗体<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
</head>
<body>
<b>b-加粗</b><br>
<i>i-斜体</i><br>
<u>u-下划线</u><br>
<s>s-删除线</s><br>
2<sup>sup-上标</sup><br>
3<sub>sub-下标</sub><br>
<em>em-强调(斜体)</em><br>
<strong>strong-强调(加粗)</strong>
</body>
</html>
6.3段落标签 -p
1.<p>,paragraph的缩写，定义段落
2.与普通文本一样，可以使用css设置段落样式
3.独占一行，是块级元素<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飞学城</title>
</head>
<body>
<p>ppppppppppppppppppp</p>
<p>pppppppppppppppppppppppppppppppppppppppp</p>
<p>pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p>
</body>
</html>
6.4超链接标签-a
<a href="http://www.baidu.com" target="_blank" title="学城">学城</a>
1.<a>,anchor(锚点)的简写，设置超链接
2.target=_blank ：打开新的页面
3.target=_self ：在当前也买你中打开新地址
4. title="学城"：鼠标悬停在文本上显示的标题
5.<a href="#">内容</a> ：返回到本页面的顶部
6.<a href="#id值">内容</a>：返回到本页面id=p1的标签处
7.<a href="a.zip">下载包</a>：可以时文档的下载资源，指定下载的文件地址
8.<a href="mailto:139232@qq.com">联系我们</a>：设置嗲你在邮件链接，计算机中需要安装邮件客户端，并且配置好相关信息
9.<a href="javascript:alert()">内容</a>：执行一段js代码
10.<a href="javascrip:;">内容</a：什么都不执行<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
</head>
<p style="height: 1000px" id="p">顶部</p>
<a href="http://www.luffycity.com" name="百度" target="_blank">_blank-百度地址</a>
<a href="http://www.luffycity.com" name="百度" target="_self">_self-百度地址</a>
<a href="db.txt">本地文件</a>
<a href="mailto:1213.qq.com">邮箱地址</a>
<a href="#">返回顶部</a>
<a href="#p">返回id=p处</a>
<!-- 添加js事件-->
<a href="javascript:alert(1)"></a>
<a href="javascript:"></a>
</html>
6.5列表标签-ul,ol
<ul>:unsorted lists-无序列表
1.标签属性：type:属性
disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识
<ol>:ordered listed-有序列表
1.标签属性：type:属性
1：数字，起始编号为1
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
</head>
<ul type="square">
<li>ul-square</li>
</ul>
<ul type="circle">
<li>ul-circle</li>
</ul>
<ul type="disc">
<li>ul-disc</li>
</ul>
<ol type="1">
<li>ol-1</li>
</ol>
<ol type="a">
<li>ol-a</li>
<li>ol-a</li>
</ol>
<ol type="A">
<li>ol-A</li>
<li>ol-A</li>
</ol>
<ol type="i">
<li>ol-i</li>
<li>ol-i</li>
</ol>
<ol type="I">
<li>ol-I</li>
<li>ol-I</li>
</ol>
</html>
6.6盒子标签-div
1.div可以对页面进行分区
2.div时块级元素，每对div占据一行，不管宽度时多少
3.一个页面中不能有两个重复id，class可以设置相同的值，并且可以设置多个，例如class=‘n1 n2‘
6.7图片标签-img
1.语法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
2.src设置的图片地址可以时本地的地址，也可以时网上的http的地址
3.图片格式可以时png、jpg或gif。
4.alt属性的值会在图片加载失败时显示在页面上
5.可以设置宽度，高度，不设置就显示图片默认的宽度和高度
6.行内块元素，两个图片会尽量放在一行
6.8标签-span
1.<span>标签也是行内块元素
2.可以单独摘除某块内容，结合css设置响应样式
6.9换行标签-br
<br>标签用来将内容换行6.10分割线-hr
<hr>用来创建水平分割线，通常用来分隔内容6.11特殊符号
在html代码中，即使你设置了很多空行，换行，也都被显示为一个空格，可以使用特殊字符
6.12表格-table
1.<table border="10" cellspacing="1"></table>表格标签，border设置表格的外围宽度，cellepacing设置每个小格之间的空细。
2.<tr>表格行
3.<td>表格列
4.<thead>表格头，<th>表格头中的单元格，默认加粗并且居中
5.<tbody>表格主体
6.<tfoot>表格底部
7.每个列的单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
8.rowspan 合并行(竖着合并)
9.colspan 合并列(横着合并)<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
</head>
<body>
<div class="table">
<table border="10"; cellspacing="1">
<!-- 表格头-->
<thead>
<tr>
<!-- 这里使用th-->
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<!-- 合并三行，这里都是使用td-->
<td rowspan="3">上午</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
</tr>
<tr>
<td >语文</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
</tr>
<tr>
<td >语文</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
</tr>
<tr>
<!-- 再合并两行-->
<td rowspan="2">下午</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
</tr>
<tr>
<td >语文</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
<td >语文</td>
</tr>
</tbody>
<tfoot>
<!-- 合并六列，这里使用td-->
<tr><td colspan="6">表格</td></tr>
</tfoot>
</table>
</div>
</body>
</html>
6.13表单-form
表单是一个包含表单元素的区域
表单元素允许用户在表单中输入内容，比如:文本域(textarea)、输入框(input),单选框(radio),复选框(checkbox)
"form表单属性"
<form action="http://www.baidu.com" method="get">
1.action：定义表单被提交时的动作，提交给服务器处理程序的地址
2.method：定义表单提交数据的方式
get：默认值，明文提交，提交数据会显示在地址上，安全性低。
提交数据有大小限制，最大为2KB
post：隐式提交，提交的内容不会显示在地址栏上，安全性高。
提交数据没有大小限制
3.enctype：
a.编码类型，及表单数据编码的方式，允许表单将什么样的数据提交给服务器
b.取值:
1.application/x-www-form-urlencoded 默认值。允许将普通字符，特殊字符提交给服务器，不允许提交文件
2.multipart/form-data，允许将文件提交给服务器
3.text/plain，只允许提交普通字符。特殊字符无法提交
"注意：如果有文件提交给服务器，method必须为POST,enctype必须为multipart/form-data""表单控件分类"
1.textarea：允许用户输入多行数据到表单控件中
属性：cols 指定文本区域的列数，变相设置当前元素的宽度
rows 指定文本区域的行数，变相设置当前元素的高度
<textarea name="txt" cols="20" rows="5"></textarea>
2.select和option
select属性：
size -取值大于1，则为滚动列表，否则是下拉选项框
multiple -设置多选，该属性在select中，那就允许多选（针对滚动列表），多选时可按住ctrl。
option属性：
value -选项的值
selected -预选中，如果不设置selected属性，那么选项框中第一项被默认选中
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
3.input：
type：
button：按钮；<input type="button" name="btnbtn" value="普通按钮">
text：明文显示用户输入的数据；<input type="text" name="txtUsename" value="请输入用户名称" readonly>
password：密文显示用户输入的数据；<input type="password" name="txtUsepwd">
radio：单选按钮；<input type="radio" name="sexrdo" value="男">男
chekbox：复选框，checked设置后，默认被选中。吃<input type="checkbox" name="chkhobby" value="吃" checked>
submit：功能固定化，负责将表单空间中内容提交给服务器；<input type="submit" name="btnsbt" value="提交">
reset：重置表单控件；<input type="reset" name="btnrst" value="重置">
file：上传文件使用；<input type="file" name="txtfile">
value：控件的值，要提交给服务器的数据
name：控件名称，服务器使用
disabled：设置该属性表示禁用该控件
4.label：关联文本与表达元素的，点击文本时，如同点击表单元素一样
for属性：表示与该label相关联的表单控件元素的ID值。
<label for="passwd">用户密码：</label>
<input type="password" name="txtUsepwd" id="passwd"><!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
</head>
<body>
<form action="http://www." method="get">
<div>
<lable for="username">用户名</lable>
<input type="text" name="username" id="username" placeholder="输入用户名">
</div>
<div>
<label for="passwd">输入密码</label>
<input type="password" name="passwd" id="passwd" placeholder="输入密码">
</div>
<div>
<label>确认密码</label>
<input type="password" name="passwd" disabled>
</div>
<div>
<label>性别</label>
<!-- 由于是单选，为了产生互斥效果，两个name要相同-->
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女" checked>女
</div>
<div>
<label>爱好</label>
<input type="checkbox" name="swimming" value="游泳" checked>游泳
<input type="checkbox" name="playing" value="打球">打球
<input type="checkbox" name="reading" value="读书">读书
</div>
<div>
<input type="file" name="yourfile">
</div>
<div>
喜欢的城市
<select name="countyenjoy" id="country_enjoy_id" size="3" multiple>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="武汉">武汉</option>
<option value="成都">成都</option>
<option value="重庆">重庆</option>
</select>
</div>
<div>
籍贯
<select name="comefrom" id="comefrom_id" >
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="武汉">武汉</option>
<option value="成都">成都</option>
<option value="重庆">重庆</option>
</select>
</div>
<div>
<lable>自我介绍</lable>
<textarea name="your_info" id="your_info_id" cols="30" rows="10"></textarea>
</div>
<div>
<input type="submit" value="提交-submit">
<input type="reset" value="充值-reset">
<input type="button" value="按钮-button">
</div>
</form>
</body>
</html>
点击提交后，地址栏中内容
6.14HTML标签属性
HTML标签可以设置属性，属性一般以键值对的方式写在开始标签中。
<div id="i1">这是一个div标签</div>
<p class='p1 p2 p3'>这是一个段落标签</p>
<a href="http://www.luffycity.com">这是一个链接</a>
<input type='button' onclick='addclick()'></input>"为什么设置属性呢？"
因为我们的标签会通过css美化，js来写事件，那么可以把标签看作是对象，对象应该有自己的属性和方法
对上面的input标签，type='button'是属性，onclick='addclick()'是方法"标签属性注意事项"
1.HTML标签除一些特定睡醒外，还可以设置自定义属性。
2.一个标签可以设置多个属性，用空格分隔，多个属性不区分先后顺序。
3.属性值要用引号括起来，可以使用双引号或单引号。
4.属性和属性值不区分大小写，推荐使用小写。6.15标签分类
分为："块状元素，行内元素，行内块状元素"
可以通过display属性对三种元素进行转换"块状元素--每个都是单独的一行"
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
特点-display:block
1.每个块级元素都单独占一行，并且气候的元素另起一行。
2.元素的高度，宽度，行高及顶和底的边距可设置
3.元素宽度不设置时，是父容器的宽度。"行内元素--不会段都成行，可用于修饰文本内容"
<a> <span> <br> <i> <em> <strong> <label>
特点：display:inline
1.和其他元素在一行，不会单独成行
2.元素的高度、宽度及顶部和底部边距不可设置
3.元素的宽度就是它包含的文字或图片的宽度，不可改变"行内块状元素"
<img> <input>
特点-display:inline-block
1.和其他元素在一行上
2.元素的高度，宽度，行高以及顶和底边距可设置6.16标签嵌套规则
1.块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️
<span><div></div></span> ❌2.块级元素不能放在p标签里面，比如
<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌3.有几个块级元素只能包含内嵌元素，不能包含块级元素
h1、h2、h3、h4、h5、h6、p4.li元素可以嵌入ul,ol,div等标签
<ul>
<li>
<ul>
<li>
<div>
</div>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ul>
</li>
</ul>7.小节
1.查询下div和span标签的作用
div是块级元素，可用于给页面划分模块
span是行内元素，主要用于给行内元素设置css样式和js事件使用
2.如何理解标签的嵌套结构？规则是怎样的？
块级元素中可以嵌套多种元素，例如input,div,form等，但h1-h6和p标签中不能嵌套块级元素
li可以嵌入ul,ol,div等标签
3.如果给你一个网站，只用div来画，怎样画？比如京东
使用div来进行划分多个模块
4.一个html包含几部分？
包含文档声明，html根标签，head头部信息，body页面主体内容
5.当使用p标签时，要注意什么
p标签是块级标签，所有内容默认都会放到一行
在html文件中，p标签中的换行和空格，在浏览器显示时，都只显示为一个空格
6.请阐述一下form标签的使用，form标签的属性有哪些？
form标签主要用户提交用户输入的内容到服务器段
form标签属性：action-是接受数据的服务端
method-get和post方法
enctype-设置表单将什么样的数据提交给服务器
7.ul的孩子元素一定是li吗？
不是
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学城</title>
</head>
<body>
<ul>
<div>diw</div>
<p>ppp</p>
<input type="text">
<div>diw</div>
<div>diw</div>
</ul>
</body>
</html>
8.如何理解语义化的标签？
HTML标签分为有语义的，如table-表格，form-表单，a-超链接,strong-强调
无语义的标签，如div,span
使用语义标签，便于代码的维护和理解，便于爬虫抓取更多有效信息，
9.标签的分类
块级标签：display:block,有div,form,ul,ol,p,table
行内标签：display:inline,如label,br,a,strong,span
行内块标签：display:inline-block,如image,input转载于:https://blog.51cto.com/10983441/2402575
1961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
