HTML基础
2021-06-16 23:04
阅读：590
YPE >
- 成对出现的：闭合标签
- 单独出现的：自闭合标签
- 标签后可以加属性
- 标签可以嵌套，但不能交叉嵌套
- 内容标签名>
- 声明浏览器文档使用哪种规范
HTML结构：
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>blogtitle>
head>
body>
文件体
body>
html>
常用标签
内常用的标签：
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="keywords" content="豆瓣，豆瓣读书，豆瓣电影">
meta name="description" content="提供图书、电影、音乐唱片的推荐、评论和价格比较，以及城市独特的文化生活。">
meta http-equiv="refresh" content="2;url=https://www.douban.com/">
title>豆瓣title>
link rel="icon" href="https://img3.doubanio.com/favicon.ico">
link rel="stylesheet" href="css%20formate.css">
head>
body>
文件体
body>
html>
内常用的标签
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>豆瓣title>
head>
body>
基本标签
h1>这是一级标题 块标签h1>
p>段落标签，包裹到内容被换行，并且上下内容之间有一行空白 块标签
b>加粗显示b>
strong>这也是加粗显示strong>
p>
em>斜体显示em>
3sup>2sup>
3sub>2sub>
strike>划线标，一般用于打折到价钱strike> br>
特殊符号：可以查网页 例： 表示空格
div>空白标签 可以自己定义格式 块标签div>
图形标签
img src="https://img1.doubanio.com/view/photo/albumcover/public/p2145708997.webp" alt="图片没有加载出来时的提示"
title="鼠标悬浮时提示的标题" width="100px" height="200px">
超链接标签
a href="class.html" target="_blank">clicka>
p>href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href=""）
p>
列表标签
无序列表[type 属性：disc（实心圆，默认）,circle（空心圆）,square(实心方块)]
ul type="disc">
li>列表的第一项li>
li>列表的第二项li>
li>列表的第三项li>
ul>
有序列表：
ol>
li>列表的第一项li>
li>列表的第二项li>
li>列表的第三项li>
ol>
定义列表：
dl>
dt>列表标题dt>
dd>第一项dd>
dd>第二项dd>
dd>第三项dd>
dl>
表格标签
p>属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）p> 表格标签
table border="1" cellspacing="0" cellpadding="0" bordercolor="blue">
tr>
th align="center">字段1th>
th align="center">字段2th>
th align="center">字段3th>
tr>
tr>
td align="center" rowspan="2">值1td>
td align="center" colspan="2">值2td>
tr>
tr>
td align="center">值2td>
td align="center">值3td>
tr>
table>
body>
html>
表单标签：
单独说说表单标签，是因为表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息
input标签
表单类型 type: text 文本输入框 password 密码输入框 radio 单选框 checkbox 多选框 submit 提交按钮 button 按钮(需要配合js使用.) button和submit的区别？ file 提交文件：form表单需要加上属性enctype="multipart/form-data" 上传文件注意两点： 1 请求方式必须是post 2 enctype="multipart/form-data" 表单属性 name: 表单提交项的键. 注意和id属性的区别：name属性是和服务器通信时使用的名称； 而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的 value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同： type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值 checked: radio 和 checkbox 默认被选中 readonly: 只读. text 和 password disabled: 对所用input都好使.
代码实例
form>
input标签
p> name input type="text" name="name"> p>
p> password input type="password" name="password">
p> 性别 :input type="radio" name="gender"> male
input type="radio" name="gender"> female
p>
p>
籍贯：
input type="checkbox" name="native palce" value="henan"> 河南
input type="checkbox" name="native palce" value="hebei"> 河北
input type="checkbox" name="native palce" value="hunan"> 湖南
input type="checkbox" name="native palce" value="hubei"> 湖北
p>
p>
input type="submit" value="注册">
p>
p>
input type="button">
input type="reset">
p>
form>
select标签
‘‘‘ select> 下拉选标签属性 name:表单提交项的键. size：选项个数 multiple：multiple
代码实例：
form>
p>
select name="native place" multiple="multiple" size="2" >
option value="hebei" selected="selected">河北option>
option value="henan">河南option>
option value="hunan">湖南option>
option value="hubei">湖北option>
select>
p>
form>
form>
p>
个人简介
textarea cols="20" rows="20" name="personal" placeholder="个人简介">
默认内容
textarea>
p>
form>
定义：
‘‘‘
下一篇：WebRTC编译具体介绍
评论
亲，登录后才可以留言！