html
html是一个网页文件就比如把一个文件改为html那么这个文件就会变成网页
html是一个超文本语言: 文本:就是可以在里面输入数字, 字符 ,汉字 ;但不能输入视频图片音频
超文本: 不仅可以输入文字 数字 字符还可以输入音频视频 图片的内容
标记 : 就是该语言的标签是成对存在的
1.4.2 结构html语言的标签的作用
Ø <html>文档声明，用来声明HTML文档所遵循的HTML规范。
Ø <head></head>头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
Ø <body></body>体部分，用来存放网页要显示的数据。
Ø <title></title>声明网页标题
Ø <meta charset=""/>用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。
Ø HTML标签 是成对出现
HTML是一门标记语言，标签分为开始标签和结束标签，如<a></a>。
如果开始和结束中间没有内容，可以合并成一个自闭标签，如<a/> <meta/>。
Ø HTML属性 属性的值一定要用引号引起来 属性是在开始的标签的里面设置
HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。
如：<a href="" target="" name="" id=""></a> src是指在当前的项目中路径会将当前的图片视 / 音频 引入到改代码中
Ø HTML注释
格式：<!-- 注释内容 -->
空格：在HTML中，多个空格会被当成一个空格来显示。
表示空格 注意这里的 ; 要写
换行 <br/>
target(target="_blank")表示新窗口打开, 默认在自己的窗口中打开(一般用于网站的连接)
th与td的区别 : th修饰的字体比td修饰的字体粗
标题标签
align="center" 居中 align="right" 居右 align="left" 居左
<h1 align="center">这是一号别墅</h1>
由大到小的标题的字体
<h1 align="center">这是一号别墅</h1>
<h2>这是二号别墅</h2>
<h3>这是三号别墅</h3>
<h4>这是四号别墅</h4>
<h5>这是五号别墅</h5>
<h6>这是六号别墅</h6>
列表标签
ol + li 有序 这里面的有序是指在该标签里修饰的内容前面有 1,2,3,4...数字标记 ul + li 无序 是指在该标签里修饰的内容前面没有1,2,3,4....数字标记 type 定义列表符号,默认是 disc 小圆点
无序 的标签
<ul>
<li>钟南山</li>
<li>钟南山</li>
<li>钟南山</li>
</ul>
执行的效果
有序的标签
<ol>
<li>袁隆平</li>
<li>袁隆平</li>
<li>袁隆平</li>
</ol>一个<li>标签一个数字要想有1,2,3, 就要有三个<li> 标签
执行的效果
空心的代码
<ul type="circle">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
执行的效果
方形的实心
<ul type="square">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
执行的效果
圆形的实心
<ul type="disc">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>执行的效果
图片标签
img向网页中引入图片 (相对路径/绝对路径)
border:边框
width:宽度
height:高度
<img src="1.jpg" border="10px" width="50px" height="30px">超链接标签
<a>超链接的标签 此时必须加http协议 , 不然会报404错误
属性 href
<a href="https://www.baidu.com">百度</a>
锚定回到顶部的效果
<a name="nnn">我是顶部</a>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<h3>如何富有</h3>
<a href="#nnn">回到顶部</a>
注意要加入 # ; 在最后一个标签(有href)中间要加内容;比如 "我是顶部"
Input标签
--input标签:实现在网页中输入不同类型的数据
<!-- input标签:类型很多,实现类各种类型的数据的输入 -->
<input type="text"/> <!-- 普通的文本-->
<input type="password"/> <!-- 密码-->
<input type="number"/> <!-- 纯数字-->
<input type="button" value="点我"/> <!-- 按钮-->
<input type="radio"/>北京 <!-- 单选-->
<input type="checkbox"/> Anglelababa <!-- 多选-->
<input type="week"/> <!-- 日期-->
<input type="submit"/> <!-- 提交按钮-->
<input type="email" /> <!-- 邮箱-->
<input type="date" /> <!-- 日期 年月日-->placeholder="用户名"/>
placeholder="密码"
就是在框内有提示汉字
table 表格标签
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table><table>表示表格 <tr>表示行 <td> 表示列 边框的颜色 border-color
执行效果
合并单元格
rowspan=" 3 " 合并的是行后面的数字是合并行数
colspan="3" 合并 的是列后面的数字是合并列数
<th> 与<td>的区别 th的内容字体比td的内容字体 较粗(加粗)
form表单标签
form标签专门向服务器提交数据, 在form标签中加name那么就会在页面中的form表单中的输入的内容(使用get)进行提交 ;再点击submit按钮会将数据提交到该网页地址(也就是提交给服务器)
get和post的区别最重要的一个区别就是通过get的数据会在网址中进行展示 ;而post提交的数据会将数据进行加密
radio 单选框 一旦选中就不能取消 如果不可加name属性那么就会变成多选框 加了name就可以变成单选且选中这个之后之前选中的就会取消;多数用于在性别男女的选框
checkbox 多选框
<input type="radio" name="sex" value="1"/>男 如果选中男那么在地址值中会展现sex=1
类型为单选框时添加name属性,并且name的值一样时,才会变成单选框select表示下拉框 ; option: option的作用是作为select里选项的元素
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>郑州</option>
</select>textarea 可以写多行文本文字,使用 CSS 的 height 和 width 属性来规定 textarea 的尺寸大小。!-- 插入音频文件 controls使用默认控件 source指定文件位置-->
<audio controls="controls"> <source src="jay.mp3"></source></audio>
<!-- 插入视频 controls使用默认控件 source指定文件位置 loop循环播放-
<video controls="controls" loop="loop"> <source src="b.mp4"></source> </video>在这里注意无论使用音频还是视频都必须在controller
name
name属性主要作用就是使用get post 等方法进行提交到服务器; 所以在使用表单是在input输入框内多数使用name属性 ; 比如用户名 ,密码 和邮箱(且加了name属性之后会自动校验邮箱格式如果不符合会不通过;) 在性别使用name属性会使radio变成单选框 否则会是多选框 ;
submit按钮
submit按钮就是将在form输入的内容; 点击submit按钮就会将数据提交到服务器中
form表单提交到服务器的过程
首先 form 是允许提交 然后 使用name 使用get post等方法提交 最后submit正式提交到服务器中
file:文件类型 <img src="当前目录下的图片的名字">图片类型img是图片里面 的src是当前项目下的文件名
其他标签
<div> 和 <p>效果相同 就是一个标签占一行,块元素
<h>标签与div标签的区别h标签的间距较大 而div标签的间距较小
<span> 多个该标签会在当前行进行拼接 , 行内元素
<hr/> 这是一条横线
<a>超链接标签
<br>换行
<a href="https://www.baidu.com" target="_blank"> 百度一下 </a>
<!-- 锚定:使用a标签实现回到顶部 -->
<a name="top">我是顶部</a>
<a href="#top"> ^回到顶部 </a>--总结
h1~h6是标题标签
table表格标签 tr行 td列
input输入标签
div/span/p 段落标签
img/video/audio 图片/视频/音频标签
a 超链接标签
width宽度(指定是左右的长度) height高度(上下的长度)
bgcolor背景色 border边框 cellspacing单元格距离
align位置 colspan合并列 rowspan合并行 ...
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
