前端入门一之HTML知识讲解
前言
- HTML是前端三件套之一，在MarkDown中也完美兼容这些语法；
- 这篇文章是本人大一学习前端的笔记；
- 欢迎点赞 + 收藏 + 关注，本人将会持续更新。
文章目录
- 前端开始
- HTML基本标记
- meta:无信息标记
- 网页主体body一些标签
- 文字与段落标记
- 使用图像
- 列表
- 使用表格
- 创建表格：
- 表单
- 表单
- 提交表单、表单名字、传递方法
- 文字字段 ：text
- 密码 ： password
- 单选按钮：radio
- 复选按钮：checkbox
- 普通按钮：button
- 提交按钮：submit
- 重置按钮：reset
- 图像域：image
- 文件域：file
- 菜单：select
- 文本域标记: textarea
- id="元素标识名"
- label
前端开始
-
web基本原则
-
结构 表达 行为，三大结构。
-
结构：写到HTML文件中；
表达：写到CSS文件中；
行为：写到JaveScript文件中。
-
-
标签
-
双标签和单标签
-
标签有开始标签和结束标签，如：为开始标签，为结束标签。
单标签</ a> /后有一个空格
-
-
第一个html：
第一个页面 乾坤未定，你我皆是黑马
HTML基本标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
meta:无信息标记
-
meta：一般用来定义页面信息的说明、关键字、刷新等
-
//必须写，否则可能乱码
- //英文（en），中文为：zh-CH
网页主体body一些标签
-
网页背景颜色
//语法： //<body bgcolor="背景颜色">
//如：
- 网页背景图片
~~~html
//语法：
<body background="图片的地址">
</body>
-
文字颜色 text
//语法： <body text="文字颜色"> </body> -
连接文字属性link
//语法： <body link="颜色" alink="正在访问的颜色" vlink="访问后的颜色"> </body> -
边距：margin
//语法 <body topmargin="上边距距离" leftmargin="左边距距离"> </body>
文字与段落标记
-
标题字
//语法 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>- 自动加粗，自动占一行
- 数字依次加大，标题大小依次减小
-
标题字对齐属性 align
- 属性值：left right center
//语法： <align="对齐方式"></align>
//如：
<h2 align="left">2级标题左对齐</h2>
<h3 align="right">3级标题右对齐</h3>
<h4 align="center">4级标题右对齐</h4>
-
字号属性
-
说明：用来设置字体大小，有绝对和相对两种方式。从1到7整数，代表字体大小的绝对字号。从-4到+4的整数，字体是相对于3号字体的大小 （注意正负号别忘了）
//语法： <font size="文字字号">……</font>
-
注意:该标记可应用于文本段落、句子和单词、甚至单个字母
-
文本格式化标记
- 粗体标记b、strong
- 斜体标记i、em、cite
- 上标标记sup
- 小标标记sub
- 大字号标记big
- 小字号标记small
- 下划线标记u
- 都为行内元素，它还可以插入到一段文本的任何部分
-
段落标记
//语法： <p>段落文字</p>- 可以没有结束标记
-
水平线
//语法：单标签 <hr>- 属性：width noshade(无阴影) color align
-
其他标签
- 空格 //语法： ；
- <号 //语法：&It；
- 大于号 //语法：>；
使用图像
//语法
<img arc="图片文件的地址">
//arc为必须属性；
-
图像提示字：alt
-
图像的宽度、高度：width 、 height
-
图像的变框border
-
图像的排列：align
-
链接：
//语法： <a href="链接地址"></a>- 空链接：“#”
- target属性：默认 _self; 还有： _blank
- 描点链接
列表
-
有序列表
<ol> //type=""属性，改变序号类型 start：起始数值 <li>……</li> <li>……</li> <li>……</li> <li>……</li> </ol> -
无序列表
<ul> //type属性 <li>……</li> <li>……</li> <li>……</li> <li>……</li> </ul> -
自定义列表
<dl> <dt>……</dt> <dt>……</dt> <dt>……</dt> <dt>……</dt> </dl>
使用表格
创建表格：
-
表格的基本构成：table tr td th(表头)
-
表格基本属性：
-
表格宽度width
-
表格高度height
-
表格对齐方式align
-
表格的边框
默认为没有 -
表格边框颜色
-
内框边距
-
表格内文字与边框的距离
-
表格背景颜色：
-
表格背景图片：
-
-
表格的行属性
-
高度控制：
-
边框颜色：
-
行背景bgcolor、background
-
行文字对齐方式：
-
-
表格单元格属性
-
单元格大小：width 、 height
-
水平跨度：colspan (笔记 课程)
-
垂直跨度：rowspan
-
对齐方式：align
-
单元格背景颜色：backcolor
-
单元格的边框颜色：bordercolor
-
单元格的亮边框：bodercolorlight
-
-
表格的结构
- 表格的表首标记
- 表格的表主体标记
表单
表单
<form>
</form>
提交表单、表单名字、传递方法
<form action="表单的处理程序" name="表单名字" method="传递方法" target="目标文件的打开方式">
</form>
- action用于表单数据提交到哪个地址
- 传递方法：get 和 post 两种
- target: _blank _self
文字字段 ：text
<input name="控件名字" type="text" value="文字字段的默认值" size="控件长度" maxlength="最长字符数" />
密码 ： password
<input name="控件名字" type="password" value="文字字段的默认值" size="控件长度" maxlength="最长字符数" />
单选按钮：radio
<input name="名字" type="radio" value="单选按钮的取值" checked/>
- checked一打开的默认值
- 注意：名字要一样
复选按钮：checkbox
<input name="名字" type="checkbox" value="复选按钮的取值" checked/>
普通按钮：button
<input name="名字" type="button" value="按钮的取值" />
- button 不提交数据
提交按钮：submit
<input name="名字" type="submit" value="按钮的取值" />
重置按钮：reset
<input name="名字" type="reset" value="按钮的取值" />
图像域：image
<input name="名称" type="image" src="图像路径" />
文件域：file
<input name="名称" type="file" value="默认名字" size="控件的长度" maxlength="最长字符数" />
菜单：select
<select name="">
<option value="">选项一</option>
</select>
文本域标记: textarea
<textarea name="" cols="列数" rows="行数" ></textarea>
id=“元素标识名”
label
<label for=" ">……</label>