基本结构
<html>
<head>
<!-- 引入与网页相关的描述及配置信息 -->
</head>
<body>
<!-- 正文部分 -->
</body>
</html>
HTML文件的结构主要有html、head、body三部分构成,现给出一个无正文内容的html文件样例:
(以VsCode为例,输入"!"再按"enter"键可打出以上内容)
title标签:
此标签是网页标题标签,将标题内容输入此处。
meta标签的一些作用:
- 信息引入说明
- keyword关键词引入(有利于网络爬虫,对网页进行检索)
例:<meta name = “keyword” content = “CSU,tyra”>
- 描述的引⼊
例:<meta name = “description” content = “关于c学习的练习⽂档”>
- 作者引⼊
例:<meta name = “author” content = “CSU”>
- viewport配置引⼊:
例:<meta name = “viewport” content = “width=device-width, initial-scale=1.0”>
width视⼝宽度, height视⼝⾼度, initial-scale初始缩放⽐例, maximum-scale最⼤缩放⽐例, nimimum-scales最⼩缩放⽐例, user-scalable是否允许⽤户缩放
link标签: 引入外部资源
- href属性:链接⽂件路径
- rel属性:当前⽂档与链接⽂档的关系;stylesheet CSS样式表;icon图标
- type:⽬标⽂件类型
例:<link rel = “style sheet” href = “css/now.css”>
style标签: 内部样式表
script标签: 引入js文件
例: <script src = “js/now.js”>
HTML标签
一、块标签
块级标签独占一行,默认宽度占满父级,高度为0,自己内容撑开高度
div,h1~h6,p,ul(无序列表),ol(有序列表),li(列表项)
对于h1~h6标签:
- 一个页面只允许写一次h1标签
- h2标签不要超过8个
- 只有h1,h2,h3是具有搜索权重的
一些HTML5新标签:
article(文章标签)、section(区域,代替div)、aside(侧边栏)、nav(导航)、header(头部信息)、footer(底部信息)
二、行标签
行标签同排序跟显示,遇到父级边界换行;不支持宽高,内容撑开宽高;不支持上下外边距(margin);不正常显示上下内边距(padding);换行被解析
span,a,sub,sup,i(倾斜),b(加粗),em(倾斜),strong(加粗)
对于a标签:
- href属性:链接⽂件路径
- target属性:_self表示本页面跳转(默认),_blank打开新页面跳转
sub与sup标签: 实现富文本
例:<p>O<sub>2</sub></p>
HTML5新标签:
em,strong为HTML5新标签,具有一定的搜索权重,而i,b不具有
三、行块标签
行块标签同排序跟显示,遇到⽗级边界换⾏;没有宽⾼的时候内容撑开宽⾼;换⾏被解析
对于img:(若只给高度或宽度,会等比例变化)
- src属性:资源路径
- title属性:鼠标悬停时的提示文本
- alt属性:图片不能正常显示时的提示文本(具有搜索权重)
表单
一、结构:
<form>
<input>
<select>
<option></option>
<option></option>
</select>
......
</form>
二、表单form:
- action属性:信息提交地址
- method:提交⽅式(get(默认):信息拼接在地址中,不安全;post:信息打包发送,安全)……
三、表单元素:
input标签:
- value属性:是指input代表的值,⽤于提交给后台
- name属性:提交的关键词
- type属性:其属性值有——
text⽂本框(placeholder:提示⽂本),
password密码框(required代表必须写内容),
radio单选框(同⼀个name属性才做单选,checked代表默认选项),
checkbox复选框,button按钮,submit提交框,
reset重置,file⽂件,
hidden隐藏(⽤于收集当前所使⽤的设备的信息)
select/option下拉选择框:
select:
- multiple属性:多选下拉框
- size属性:下拉框所展示做多选项数量
例:
<select name=“sheng” multiple size="2">
<option value=“湖南省”>湖南省</option>
<option value=“湖北省”>湖北省</option>
<option value=“湖北省”>江西省</option>
</select>
textarea多行文本域:
- style属性:style=“resize:none”表示⽂本域大小不能调整