前端入门一之HTML知识讲解

前言

HTML是前端三件套之一，在MarkDown中也完美兼容这些语法；
这篇文章是本人大一学习前端的笔记；
欢迎点赞 + 收藏 + 关注，本人将会持续更新。

文章目录

前端开始
HTML基本标记
表单
- - - 表单
    - 提交表单、表单名字、传递方法
    - [文字字段：text](#文字字段：text)
    - [密码： password](#密码： password)
    - 单选按钮：radio
    - 复选按钮：checkbox
    - 普通按钮：button
    - 提交按钮：submit
    - 重置按钮：reset
    - 图像域：image
    - 文件域：file
    - 菜单：select
    - [文本域标记: textarea](#文本域标记: textarea)
  - id="元素标识名"
  - - label

前端开始

web基本原则
1. 结构表达行为，三大结构。
2. 结构：写到HTML文件中；
  
  表达：写到CSS文件中；
  
  行为：写到JaveScript文件中。
标签
1. 双标签和单标签
2. 标签有开始标签和结束标签，如：为开始标签，为结束标签。
  
  单标签</ a> /后有一个空格
第一个html：

第一个页面乾坤未定，你我皆是黑马

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一些标签

网页背景颜色

html 复制代码

//语法：
//<body bgcolor="背景颜色">

//如：

- 网页背景图片

  ~~~html
  //语法：
  <body background="图片的地址">
      
  </body>

文字颜色 text

html 复制代码

//语法：
<body text="文字颜色">
    
</body>

连接文字属性link

html 复制代码

//语法：
<body link="颜色" alink="正在访问的颜色" vlink="访问后的颜色">
    
</body>

边距：margin

html 复制代码

//语法
<body topmargin="上边距距离" leftmargin="左边距距离">
    
</body>

文字与段落标记

标题字

html 复制代码

//语法
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

自动加粗，自动占一行
数字依次加大，标题大小依次减小

标题字对齐属性 align
- 属性值：left right center

html 复制代码

//语法：  <align="对齐方式"></align>
//如：
<h2 align="left">2级标题左对齐</h2>
<h3 align="right">3级标题右对齐</h3>
<h4 align="center">4级标题右对齐</h4>

字号属性
- 说明：用来设置字体大小，有绝对和相对两种方式。从1到7整数，代表字体大小的绝对字号。从-4到+4的整数，字体是相对于3号字体的大小（注意正负号别忘了）
  html 复制代码
```
//语法： <font size="文字字号">......</font>
```

注意:该标记可应用于文本段落、句子和单词、甚至单个字母

文本格式化标记
1. 粗体标记b、strong
2. 斜体标记i、em、cite
3. 上标标记sup
4. 小标标记sub
5. 大字号标记big
6. 小字号标记small
7. 下划线标记u
8. 都为行内元素，它还可以插入到一段文本的任何部分
段落标记
html 复制代码
```
//语法：
<p>段落文字</p>
```
- 可以没有结束标记
水平线
html 复制代码
```
//语法：单标签
<hr>
```
- 属性：width noshade(无阴影) color align
其他标签
- 空格 //语法：&nbsp；
- <号 //语法：&It；
- 大于号 //语法：&gt；

使用图像

html 复制代码

//语法
<img arc="图片文件的地址">
//arc为必须属性；

图像提示字：alt
图像的宽度、高度：width 、 height
图像的变框border
图像的排列：align
链接：
html 复制代码
```
//语法：
<a href="链接地址"></a>
```
- 空链接："#"
- target属性：默认 _self; 还有： _blank
- 描点链接

列表

有序列表

html 复制代码

<ol>      //type=""属性，改变序号类型    start：起始数值
    <li>......</li>
    <li>......</li>
    <li>......</li>
    <li>......</li>
    
</ol>

无序列表

html 复制代码

<ul>      //type属性
    <li>......</li>
    <li>......</li>
    <li>......</li>
    <li>......</li>
</ul>

自定义列表

html 复制代码

<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
表格的结构
- 表格的表首标记
- 表格的表主体标记

表单

html 复制代码

<form>
    
</form>

提交表单、表单名字、传递方法

html 复制代码

<form action="表单的处理程序" name="表单名字" method="传递方法" target="目标文件的打开方式">
    
</form>

action用于表单数据提交到哪个地址
传递方法：get 和 post 两种
target: _blank _self

文字字段：text

html 复制代码

<input name="控件名字" type="text" value="文字字段的默认值" size="控件长度" maxlength="最长字符数" />

密码： password

html 复制代码

<input name="控件名字" type="password" value="文字字段的默认值" size="控件长度" maxlength="最长字符数" />

单选按钮：radio

html 复制代码

<input name="名字" type="radio" value="单选按钮的取值" checked/>

checked一打开的默认值
注意：名字要一样

复选按钮：checkbox

html 复制代码

<input name="名字" type="checkbox" value="复选按钮的取值" checked/>

普通按钮：button

html 复制代码

<input name="名字" type="button" value="按钮的取值" />

button 不提交数据

提交按钮：submit

html 复制代码

<input name="名字" type="submit" value="按钮的取值" />

重置按钮：reset

html 复制代码

<input name="名字" type="reset" value="按钮的取值" />

图像域：image

html 复制代码

<input name="名称" type="image" src="图像路径" />

文件域：file

html 复制代码

<input name="名称" type="file" value="默认名字" size="控件的长度" maxlength="最长字符数" />

菜单：select

html 复制代码

<select name="">
    <option value="">选项一</option>
</select>

文本域标记: textarea

html 复制代码

<textarea name="" cols="列数" rows="行数" ></textarea>

id="元素标识名"

label

html 复制代码

<label for=" ">......</label>

前端入门一之HTML知识讲解

文章目录

前端开始

HTML基本标记

meta:无信息标记

网页主体body一些标签

文字与段落标记

使用图像

列表

使用表格

创建表格：

表单

表单

提交表单、表单名字、传递方法

文字字段 ：text

密码 ： password

单选按钮：radio

复选按钮：checkbox

普通按钮：button

提交按钮：submit

重置按钮：reset

图像域：image

文件域：file

菜单：select

文本域标记: textarea

id="元素标识名"

label

文字字段：text

密码： password