您的位置：首页 > Web前端 > HTML

第二阶段：第一周第一天：html

2019-08-12 22:06 24 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/langdei/article/details/99341951

1.HTML简介

HTML是用来做网页
HTML:Herp Text MarkUp Language 超文本标记语言
超文本：超：超链接 包含超链接的文本
标记语言：
标记：标签
语言：制作网页的语言
一个网页是由多个标签组成的

2.语法介绍

html是由浏览器来解析，所以不需要安装任何编译环境
Html文档的基本结构：
<!DOCTYPE html>  声明文档
<html>          是网页当中最大的标签，所有内容都要写在此标签内
<head>         head头  主要用于书写网页的设置 一般写不直接显示给用的内容
包含的内容：
字符编码的设置
网页的标题
引入外部的css文件
引入外部的JavaScript 文件
Body: body体，网页的身体部分 网页中只要是显示给用户的内容，都要写在此标签

head和body 都是html的子标签

Html标签写法分类：
双标签：<标签名></标签名>  / <开始标签>内容</结束标签>
单标签: <标签名 />  一般写成<标签名>

Html标签的属性：
一般是键值对 key=”value”
属性的值必须使用双引号引起来

** 注意：**
Html不会报错 所以注意双标签不要忘了闭合
Html标签不区分大小写 规范要求都是用小写

3.html使用 标签

1.h1-h6 标题标签

双标签 有默认样式 字体变粗 变大 变黑 会自动换行

一般一个页面中h1只使用一次 h2-h6可以重复使用
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.p 段落标签

双标签 有默认的样式  会自动换行

3.常见的实体字符

&nbsp;    空格
&gt;      大于号
&lt;      小于号
&copy;   版权标志，©标志

4.i 标签 b标签 em 标签 strong标签 u标签
i标签 单纯的字体斜体
em 也是斜体 只不过具有强调意义 表示强调 给搜索引擎使用
b 加粗
strong 加粗 具有强调意义
u 下划线
以上都是双标签

5.br hr

都是单标签
br 强制换行
br 单标签 强制换行
在html中 普通文本添加换行 或者空格 在页面中只解析成一个空白符
hr 水平线

6.img 图片标签

单标签
属性：
src  图片的地址
title  标题 当鼠标移入时 给出的提示
alt  当图片加载失败时的替代内容
可以使用网络图片或者本地的图片
使用的是本地的图片资源
相对路：相对于当前文件来去查找指定的资源
./ 代表当前路径
../ 代表上一级路径
windows下根目录 根目录一般是 盘符:
注意加载图片时盘符前面加/
Linux下的根目录用/ 来表示

绝对路径: 不考虑当前文件的位置，从根目录去查找指定的资源

推荐使用相对路径

7.列表标签

无序列表
ul: 声明一个无序列表
li: 列表项
type(了解): 默认disc  圆
square  方块
circle   空心圆

ul中的直接子元素必须是li
有序列表
ol:声明一个有序列表
li: 列表项
type:
1  代表数字 默认就是数字
a  代表小写字母
A  代表大写字母
i  小写的罗马数字
I  大写的罗马数字
start: 指定以第几个开始 只能写数字
自定义列表
dl:声明一个自定义列表
dt:列表的标题
dd:列表描述项

8.a 标签超链接

超连接a 双标签
页面跳转
href: 跳转的地址
如果不给值 跳转当前页面
target:_blank  新打开一个窗口加载跳转后的页面

跳转到当前页面的指定位置 锚点
给指定标签添加id属性
a标签的href属性的值为#指定元素id属性的值
跳转到 本地html文件的指定位置
a标签的href属性的值为指定页面中标签的id的值
<a href="./5超链接.html#item5">跳转到5超链接.html的五楼位置</a>

9.表格标签

table: 声明一个表格
border: 边框
cellspacing: 设置表格和表格之间的间距  **
cellpadding: 设置表格中内容距离当前表格边框之间的间距
tr: 声明一个行
td/th: 声明一个列

水平对齐方式：align   **
align:默认靠左对其 left
center   居中
right    靠右对齐
如果给tr设置 设置当前行的所有
如果给td/th  设置当前一列

valign: 默认垂直居中 **
top:靠上对其
bottom:靠下对其
单元格合并： **
跨行合并
rowspan: 设置当前列 占几个行的高度
跨列合并
colspan: 设置当前列占 几个列的宽度

10.form ：声明一个表单域
属性：
action:提交地址 如果不写，提交到当前页面
method: 指定提交数据的方式
get: 默认是get提交
将数据明文显示在地址栏 相对不太安全
数据大小受浏览器限制
post:
不会将数据明文显示在地址栏 相对安全
理论上数据大小不受限制 表单的数据是要提交给后台，提交数据的格式一般是键值对
Uname=用户在用户名框输入的内容 所以表单控件除了按钮都要加name属性
表单控件的属性：
name: 必须添加 座位提交数据的key
value: 代表值
type: 指定你的控件类型
text 普通文本输入框
password 密码输入框
radio 单选框
同一组单选框的name属性的值必须相同
必须设置默认值 value属性
checkbox: 多选框
同一组多选框的name属性的值必须相同
必须设置默认值 value属性

select>option: 下拉选框 option 选项
select 必须添加name属性
option 必须设置value
textarea:
文本域/多行文本输入框  双标签

hidden: 隐藏域
有些时候有些数据不希望用户看到和修改所以可以使用隐藏域

提交按钮： type="submit"
<button>按钮</button>
单纯的按钮：
在form 表单域中 type="button"   只是单纯的按钮 没有提交意义

checked 设置单选框和多选框的默认选中状态
selected 设置下拉选框的默认选中状态  给option设置
disabled 禁用

了解： type="reset"  重置按钮
type="image"  图片按钮

按照标签效果分类：
块标签：
会自动换行(独占一行)
h1-h6 p ul li ol dl dt dd table tr
行标签：
不会自动换行，标签和标签并排在一行显示,没有宽高属性
I b u em strong
行内块：
不会自动换行，标签和标签并排在一行显示，可以设置宽高
Img input

没有默认样式的块标签和行标签

div 块标签 没有默认样式 一般配合css做网页的布局
Span 行内标签，没有默认样式 一般也是配合css去使用

type 类型改为file 上传头像
上传头像：

用户名： 效果显示如下：（用户名的input内有虚的请输入用户名） ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190812214133998.png)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航