学习笔记（1）元素，列表，表格，表单，

1，HTML基础

• HTML：是超文本标记语言 (Hyper Text Markup Language)。
• 标记语言是一套标记标签 (markup tag)。HTML 使用标记标签来描述网页。

1.1，HTML文档

• HTML 文档包含了HTML 标签及文本内容。
• HTML文档也叫做 web 页面。

1.2，HTML标题

HTML标题是通过h1-h6标签定义的。

<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
1
2
3

1.3，HTML链接

HTML 链接是通过a标签来定义的。

<div>
	<a href="https://www.baidu.com">跳转到百度a>
div>


<div>
	<a href="https://www.baidu.com" target="_blank">跳转至百度a>
div>
1
2
3
4
5
6
7
8
9

1.4，HTML图像

HTML图像是用img标签定义的。

 
<img src="img01.jpg" alt="图片显示错误" width="200" height="100">
1
2

2，元素

2.1，HTML元素

HTML 元素以开始标签起始，以结束标签终止，
元素的内容是开始标签与结束标签之间的内容。

<h1>今天是个好日子h1>
1
2

2.2，元素分类

元素分3类：行元素、块元素、行内块元素；这3类元素可以通过display属性进行任意转换。

display:inline;  /*转换为行内元素*/
display:block;  /*转换为块状元素*/
display:inline-block;  /*转换为行内块状元素*/。
1
2
3

外边距重叠的条件?
1，必须是块元素，
2，必须是向下的外边距，
3，没有边框。

3，列表

列表有三类：有序列表（ol标签）、无序列表（ul标签）、定义列表（dl标签）

/* 删除列表项的前缀。 */
list-style:none;
1
2

1. 有序列表

<ol>
	
	<li>Firefoxli>
	<li>Edgeli>
	<li>googleli>
ol>
1
2
3
4
5
6

2. 无序列表

<ul>
    <li>Firefoxli>
    <li>Edgeli>
    <li>googleli>
ul>
1
2
3
4
5

3. 定义列表

<dl>
	
	<dt>htmldt>
	
	<dd>vue是当今最流行的前端框架之一dd>
dl>
1
2
3
4
5
6

4，表格

<td rowspan="2">张三td>当前td所占的行高是两行的高度 

<td colspan="2">25td>表示当前单元格要占用两列的宽度
1
2
3
4

5，表单元素

input：输入框，行内块元素。placeholder：提示内容。

<input type="text" placeholder="请输入账号">
1

button：按钮，行内块元素。

<button>按钮button>
1

lable标签：用于关联一个其他的表单元素，for属性需要写关联元素的id，点击lable相当于点击了关联的元素。

<label for="psw">密码:label>
1

radio：单选框，处在同一组的单选框只能选一个值。

<input type="radio" name="city">
<label for="">上海label>
<input type="radio" name="city">
<label for="">深圳label>
<input type="radio" name="city">
<label for="">北京label>
<input type="radio" name="city">
1
2
3
4
5
6
7

chechbox：复选框，可以多选。

<label for="">香蕉label>
<input type="checkbox">
<label for="">苹果label>
<input type="checkbox">
<label for="">西瓜label>
<input type="checkbox">
1
2
3
4
5
6

select：下拉列表，行内块。
option：下拉列表项。

<select id="nvyou">

<option>小明option>
<option>小红option>
<option>小刚option>
select>
1
2
3
4
5
6