HTML基础
1.HTML初识
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
HTML总结：
- html 是超文本标记(标签)语言
- 我们学习html 主要学习html标签
- 我们用html标签描述网页元素。 比如 图片标签 、文字标签、链接标签等等
- 标签有自己的语法规范，所有的html标签都是用 <> 表示的
- H（很）T（甜）M（蜜）L（啦） 是很快乐的一件事情
1.HTML骨架标签
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
2.HTML元素标签分类
标签：
- 在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 、、都 是HTML骨架结构标签。
分类：
- 常规元素（双标签）
<标签名> 内容 </标签名> 比如 <body> 我是文字 </body>
- 该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示
- 该标签的作用结束，一般称为“结束标签（end tag）”。
- 和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
- 我们以后接触的基本都是双标签
- 空元素（单标签）
<标签名 /> 比如 <br />
- 空元素 用单标签来表示， 简单点说，就是里面不需要包含内容， 只有一个开始标签不需要关闭。
3.HTML标签关系
主要针对于双标签的相互关系分为两种：请大家务必熟悉记住这种标签关系,因为后面我们标签嵌套特别多,很容易弄混他们的关系。
1.嵌套关系
<head>
<title> </title>
</head>
2.并列关系
<head></head>
<body></body>
2.HTML常用标签
1.排版标签
- 排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
1.标题标签h
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
显示效果如下：
小结：
- 加了标题的文字会变的加粗，字号也会依次变大
- 一行是只能放一个标题的
2.段落标签p
作用语义：
- 可以把 HTML 文档分割为若干段落
<p> 文本内容 </p>
是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
3.水平线标签hr
就是创建横跨网页水平线的标签。其基本语法格式如下：
<hr />是单标签
4.换行标签br
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
<br />
5.div 和 span标签
语法格式：
<div> 这是头部 </div> <span>今日价格</span>
- div标签 用来布局的，但是现在一行只能放一个div
- span标签 用来布局的，一行上可以放好多个span
2.文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
3.标签属性
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。
基本语法格式如下：
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸"> </手机>
4.图像标签img
语法如下：
<img src="图像URL" />
- 该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
注意：
-
标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
-
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
-
采取 键值对 的格式 key=“value” 的格式
5.链接标签
语法格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
注意：
-
外部链接 需要添加 http:// www.baidu.com
-
内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
-
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
-
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
6.注释标签
语法格式：
<!-- 注释语句 --> 快捷键是： ctrl + / 或者 ctrl +shift + /
3.HTML拓展
1.锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系）
<a href="#two">
2.base标签
语法：
<base target="_blank" />
总结：
-
base 可以设置整体链接的打开状态
-
base 写到 之间
-
把所有的连接 都默认添加 target="_blank"
3.特殊符号
一些特殊的符号,我们再html 里面很难或者不方便直接使用,我们此时可以使用下面的替代代码。
4.表格table
1.创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。
创建表格的基本语法：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
-
table用于定义一个表格标签。
-
tr标签 用于定义表格中的行，必须嵌套在 table标签中。
-
td 用于定义表格中的单元格，必须嵌套在标签中。
-
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。
总结：
- 表格的主要目的是用来显示特殊数据的
- 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签中只能嵌套类的单元格
- 标签，他就像一个容器，可以容纳所有的元素
2.表格属性
3.表头单元格标签th
- 作用：
- 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
- 语法：
- 只需用表头标签
<th></th>替代相应的单元格标签<td></td>即可
- 只需用表头标签
4.表格标题caption
定义和用法
<table>
<caption>我是表格标题</caption>
</table>
注意：
-
caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
-
caption 标签必须紧随 table 标签之后。
-
这个标签只存在 表格里面才有意义。
5.合并单元格
1.合并单元格2种方式
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
2.合并单元格顺序
- 合并的顺序我们按照 先上 后下 先左 后右 的顺序
3.合并单元格三部曲
-
先确定是跨行还是跨列合并
-
根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量
-
删除多余的单元格
5.列表和表单
1.列表标签
1.无序列表ul
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
小结：
-
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 -
<li>与</li>之间相当于一个容器，可以容纳所有元素。
2.有序列表ol
- 有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义
有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
3.自定义列表
- 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
2.表单标签
作用：
- 表单目的是为了收集用户信息。
- 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
1.input控件
语法：
<input type="属性值" value="你好">
<input />标签为单标签- type属性设置不同的属性值用来指定不同的控件类型
常用属性：
1.type属性
这个属性通过改变值，可以决定了你属于那种input表单。
比如 type = ‘text’ 就表示 文本框 可以做 用户名， 昵称等。
比如 type = ‘password’ 就是表示密码框 用户输入的内容 是不可见的。
用户名: <input type="text" />
密 码：<input type="password" />
2.value属性
用户名:<input type="text" name="username" value="请输入用户名">
- value： 默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
3.name属性
用户名:<input type="text" name=“username” />
name：表单的名字,这样后台可以通过这个name属性找到这个表单。页面中的表单很多,name主要作用就是用于区别不同的表单。
- name属性后面的值，是我们自己定义的。
- radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
4.checked属性
- 表示默认选中状态。 较常见于单选按钮和复选按钮。
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
5.input属性小结
2.label标签
作用：
- 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
用法：
- 第一种用法就是用label直接包括input表单。
<label> 用户名： <input type="radio" name="usename" value="请输入用户名">
</label> 适合单个表单的选择
- 第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
点击 label标签里面的文字时， 光标会定位到指定的表单里面
3.textarea控件
语法：
<textarea >
文本内容
</textarea>
作用：
-
通过textarea控件可以轻松地创建多行文本输入框.
-
文本框和文本域区别
4.select下拉列表
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意：
-
<select>中至少包含一对 option -
在option 中定义selected =" selected "时，当前项即为默认选中项。
3.form表单域
目的：
- 在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
语法：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
3166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
