HTML基础

准备内容

1.浏览器内核

2.Web标准

Web标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际著名的标准化组织。

3.工具—Vs code插件安装

HTML概念-超文本标记语言

特点：
1、HTML不需要编译，直接通过浏览器展现
2、HTML文件是一个文本文件
3、必须使用HTML /HTM作为文件的后缀名
4、大小写不敏感，HTML与html一样
开发工具：
1、普通：记事本、word
2、Dreamviewer – DW webstorm – ws sublime hbuilder – app
文档段落
1、文档类型声明 DOCTYPE
2、<!DOCTYPE>声明必须放在HTML文档的第一行
3、<!DOCTYPE>声明不是HTML标签

网页编码设置

问题：当网页显示出现乱码
解决：在 之间添加处理中文乱码标签
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

文字和段落

标题标签：<h1></h1> ~ <h6></h6>
段落标签：<p></p>

align属性 – 对齐方式的属性：

left 左对齐内容
Right 右对齐
Center 居中
Justify 对行进行伸展，这样使得每行都会有相等的长度

换行标签：

预编译：<pre></pre>

修饰符标签和特殊符号

1、水平线标签：<hr/>
2、文字斜体：<i></i> <em></em>
3、加粗：<b></b> <strong></strong>
4、下标：<sub>
5、上标：<sup>

特殊符号

1、<<
2、> >
3、®已注册
4、©© 版权
5、™TM商标
6、  space空格

4.HTML标签列表

标签参考手册：https://www.w3school.com.cn/tags/index.asp

5.路径

相对路径—以引用文件所在位置作为参考，而建立出的目录路径。
这里简单来说，图片相对于HTML页面的位置

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，”D:\web\img\logo.gif” 或完整的网络地址 “http://www.itcast.cn/images/logo.gif“

6.链接分类

1.外部链接 | 2.内部链接 | 3.空连接 | 4.下载链接 | 5.网页元素链接 | 6.锚点链接
锚点链接：
链接目标

链接目标

7.特殊字符

常用特殊字符

8.表格

表格标签>

<table><!--大表格-->
  <tr><!--表格行--><th></th><!--表头单元格-->
    <tb></tb><!--表格单元-->...</tr>
  <tr><!--表格行--><tb></tb>...</tr>
</table>

表格属性：

表格结构标签：
<thead></thead>
<tbody></tbody>
合并单元格
放在表格单元标签中，例：

• 跨行合并：rowspan=”合并单元格个数”
• 跨列合并：colspan=”合并单元格个数”

  9.列表

  列表分类：无序列表、有序列表、自定义列表
  列表标签：
• 标签之间可以放任何元素；
  无序列表：

  <ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
    </ul>

  有序列表：

  <ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
    </ol>

  自定义列表：

  <dl>
  <dt>列表项1</dt>
  <dd>列表项2</dd>
  <dd>列表项3</dd>
  ...
  </dl>

表单组成
在HTML中，一个完整的表单通常由表单域、 表单控件(也称为表单元素)和提示信息3个部分构成。

表单域：一个包含表单元素的区域；
在HTML中，<from>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
</form>

表单属性

10.表单

1.input输入表单元素
<input>标签用于收集用户信息，在<input>标签中，包含一个type属性，根据不同的属性值，输入字段拥有很多种形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）。
<input type="属性值" />
type属性介绍：https://www.w3school.com.cn/tags/att_input_type.asp

input标签除type属性外，还有其他属性值：

value和name的区别

• 表格数据需要提交时，设置name属性
• value对于input和textarea标签时，设置框里的默认文本，在提交数据时会被提交。
• value对于radio和checkbox标签时，设置选项对应的值，在提交数据时会被提交。即name=value

取消**input type='number'**中的上下箭头选择

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
    }

标签
标签为input元素定义标注（标签）。
标签用于绑定一个表单元素当点击标签内的文本时，浏览器就会自动将焦点（光标转到或者选择对应的表单元素上用来增加用户体验）。

<form action="">
    <label for="name">姓名：<input type="text" id="name"></label>
</form>

2.select下拉表单元素
语法：

<select>
       <option>china</option>
       <option>America</option>
       <option>Japen</option>
       <option>Canada</option>
</select>

3.textarea文字域元素
留言反馈语法：

<textarea rows="20" cols="20">
        文本内容
</textarea>

1.通过<textarea>标签可以轻松地创建多行文本输入框。
2.cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小。