# HTML **Repository Path**: sun-lan/html ## Basic Information - **Project Name**: HTML - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-02-25 - **Last Updated**: 2021-02-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # HTML的相关概念和建站流程 ## 1HTML的概念：超文本标记语言（英文Hyper Text Markup Language的缩写） ## 2HTML的基本组成 ​ 结构 html/xhtml w3c(万维网联盟)制定规范 ​ 样式 css w3c(万维网联盟)制定规范 ​ 行为 js ECMA(欧洲电脑网商联合会) ## 3xhtml: 可扩展的标记性语言 ## 4xhtml和html的区别？？ 1. xhtml的单标签后面需要加 / 2. XHTML的标签必须是小写 3. XHTML属性值必须使用双引号 # HTML的基本结构 1. 新建带有.html后缀的文件 2. 英文状态下 按! 按tab 生成基本结构 ```html 我的第一个网页啊 文字/图片/视频 ``` ## 文档类型 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。 注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。 ## 字符集 1. utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。 2. gb2312 简单中文 包括6763个汉字 3. BIG5 繁体中文 港澳台等用 4. GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312 5. UTF-8则包含全世界所有国家需要用到的字符 ## HTML标签的语义化 ​ 白话： 所谓标签语义化，就是指标签的含义。 ## 为什么要有语义化标签 1. 方便代码的阅读和维护 2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容 3. 使用语义化标签会具有更好地搜索引擎优化 核心：合适的地方给一个最为合理的标签。 语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。 白话，一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。 遵循的原则：先确定语义的HTML ，再选合适的CSS。 # HTML的基本语法 - 标记/标签/元素：放在尖括号中的第一个单词 - 双标签/双标记：成对出现的标签 - 单标签/空标记：单独出现的 - 属性：跟在标签后面，用空格隔开 - 属性和属性值直接用等号连接 - 属性值必须用引号引起来 - 属性可以是多个，多个之间用空格隔开 HTML的基本标签 ## 文章类的标签 - **标题标签 h1-h6** - 双标签/加粗且字体较大/h1-h6字体大小逐渐变小/独占一行 - **段落标签** ```

``` - 双标签/独占一行 - 随机生成一段文本：lorem回车，要控制多少个字的话，lorem字的个数，如：lorem100 - 控制换行：文件->首选项->搜索框输入“wrap” 将控制折行的方法切换成 on - **加粗** ``` ``` - 双标签/加粗样式/可以在同一行显示 - **倾斜** ``` ``` - 双标签/倾斜样式/可以在同一行显示 - **删除线** ``` ``` - 双标签/可以在同一行显示 - **下划线** ``` ``` - 双标签/文字下面有下划线/可以在同一行显示 - **上标 双标签** ``` ``` - **下标 双标签** ``` ``` - **换行 br 单标签** ```
``` - **水平线 hr 单标签** ```
``` - **特殊字符** ``` < > & ® ©   ``` - **超链接 a** 双标签/自带颜色/自带的下划线/在同一行显示 - href: 点击所要跳转的页面的路径 - 窗口的打开方式 target - _self 自身窗口打开，默认值 - _blank 新开窗口去打开 ``` ``` - 图片 img ``` 未加载的时候显示 ``` - src: 图片路径 - 绝对路径：直接复制线上的图片地址，粘贴到对应的src的属性值里面 - 相对路径 - 当当前文件和目标文件在同一个目录下面的时候,直接图片名.后缀 - 当当前的文件和目标文件的文件夹在同一个目录下面,文件夹名/图片名.后缀，套几个文件夹就进几次 - 当当前文件的文件夹和目标文件的文件夹在同一个目录下面，../文件夹名/图片名.后缀 - alt 图片未加载的时候显示 - title 鼠标划过显示的文字，可以应用到所有的标签 ## 标签属性 使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下： ``` <标签名 属性1="属性值1" 属性2="属性值2" …> 内容 ``` 在上面的语法中， 1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。 2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 3.任何标签的属性都有默认值，省略该属性则取默认值。 采取 键值对 的格式 key="value" 的格式 # 布局标签和列表标签 ```html
  1. 嘻嘻嘻1
  2. 嘻嘻嘻2
  3. 嘻嘻嘻3
图片/名词
图片说明/名词的解释
``` # 表格标签及示例 表格: 主要用在后台系统展示数据，一般不用在前台网页布局 ## table 表格 - 边框 border="数字" 像素px - 宽度 width="数字" 高 height="数字" - 表格水平位置 align 1. left 默认值 2. center 居中 3. right 居右 - 单元格之间的间距 cellspacing="数值" 一般设置0 去掉单元格之间的间距 - 调整内容到单元格的距离 cellpadding="数值" - 快速生成表格 table>tr10>td8{$} 10行8列的表格 ## tr 行 - 水平对齐方式 align 1. left 默认值 2. center 居中 3. right 居右 - 垂直对齐方式 valign 1. middle 居中 默认值 2. top 居上 3. bottom 居下 ## td 列 - 水平和垂直的对齐方式和tr一样 - 列合并 colspan - 行合并 rowspan - 合并的步骤： 1. 补全表格，有几行几列就生成几行几列的表格 2. 观察属于行合并还是列合并，哪个不同合并哪个 3. 确定属性之后，观察合并几个单元格，属性对应的值就是几 4. 将合并的属性放到合并的起始的单元格 5. 注释掉多余的单元格 ## 表格的新增 ### 标题标签 caption - caption-side:top(默认)/bottom 标题的位置 ```html
标题
``` ### 列标题 th ```html 姓名 性别 年纪 ``` ### 行分组 ``` - 表头 可选 - 表体 可以有多个 - 表尾 可选 ``` ### 列分组 colgroup span: 几列为一组 ```html ``` ### 单元格之间的距离 border-spacing：数值+px 一般设置0。加在表格身上 ### 合并边框 border-collapse:collapse; 加在表格身上 ### 表格固定 table-layout:auto(自动)/fixed(固定) 加在表格身上 设置表格为fixed提高浏览器加载速度 ### 垂直对齐方式 vertical-align: baseline/top/bottom/middle 可以在单元格中生效 在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示： ``` ：用于定义表格的头部。 必须位于
标签中，一般包含网页的logo和导航等头部信息。 ：用于定义表格的主体。 位于
标签中，一般包含网页中除头部和底部之外的其他内容。 表格的标题： caption 表头一般位于表格的第一行或第一列，其文本加粗居中，即为设置了表头的表格。设置表头非常简单，只需用表头标签th Document
啦啦啦
您的大名 贵庚 照片
是否毕业 专业是啥
大学名称
从事过工作
h5基础程度
自我性格描述
自我简述
啦啦啦啦
``` # 表单 ## 表单控件 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 ## 提示信息 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。 ## 表单域 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。 ## input 控件(重点) 在上面的语法中，input /标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，input /标签还可以定义很多其他的属性 ![img](https://img-blog.csdnimg.cn/20200926151505948.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQ1MjQ3Ng==,size_16,color_FFFFFF,t_70) ![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==) ## label标签(理解) label 标签为 input 元素定义标注（标签）。 作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点 如何绑定元素呢？ for 属性规定 label 与哪个表单元素绑定。 ## textarea控件(文本域) 如果需要输入大量的信息，就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下： ## 常用属性 1. Action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。 2. method用于设置表单数据的提交方式，其取值为get或post。 3. name用于指定表单的名称，以区分同一个页面中的多个表单。 ## 注意 每个表单都应该有自己表单域。 ## 表单的新增 ### 表单的新增 单选框 name的属性必须有，且值必须一样才能够互斥，checked 默认选中 disabled 禁止选中 ```html 男女 ``` #### 多选框 checked 默认选中 disabled 禁止选中 ```html M416 AKM ``` #### 下拉列表 selected:默认选中 ```html ``` #### 多行文本域 禁止用户缩放：给textarea 添加 resize:none; ```html ``` #### 文件上传 ```html ``` #### 扩大表单选中范围 label for的属性值指向选择元素的id名 ```html ``` #### 表单字段集 fieldset,字段集标题 legend ```html
标题
``` ## 去掉表单元素获取焦点时候的边框 outline:none; ## 小案例 ```html Document

青春不常在 抓紧时间敲代码
所在地区:
用户名:
年龄
籍贯:
性别 男: 女: 人妖:
喜欢的类型 妩媚 成熟 气质 可爱 小鲜肉 御女
上传头像
给我留言
```