html技术点（1）—元素，列表，表格，表单，语义化标签

1，HTML简介

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

1.1，HTML元素

HTML 标签 和 HTML 元素，其实是一个意思，
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，
HTML 元素以开始标签起始，以结束标签终止，
元素的内容是开始标签与结束标签之间的内容。

<!--   <h1>是开始标签，</h1>是结束标签     -->
<h1>今天是个好日子</h1>

1.2，HTML文档

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

2，元素

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

display:inline;转换为行内元素
display:block;转换为块状元素
display:inline-block;转换为行内块状元素。

名字	例子	特点
行元素	a，span	不能设置宽高，宽高取决于元素本身的内容。多个元素占用一行，到最后会自动换行。
块元素	di，p，h1—h6。	独占一行，可以设置宽高。如果不设置宽高，宽度就继承父元素的宽度，高度是0。如果有内容，高度就是内容的高度。
行内块元素	button，input，img。	既有行元素的特性，也有块元素的特性。可以为元素设置宽高，不独占一行，多个行内块会左右排列。

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

3，列表

列表：1.有序列表(ol),2.无序列表(ul)
列表项：li

<!--有序列表-->
        <ol>
            <li>Firefox</li>
            <li>Edge</li>
            <li>google</li>
        </ol>
        
<!--无序列表-->
        <ul>
            <li>Firefox</li>
            <li>Edge</li>
            <li>google</li>
        </ul>

list-style：none删除列表项的前缀。

自定义列表：dl

<dl>
        <!-- 描述项目中的标题 -->
        <dt>html</dt>
        <!-- 具体内容 -->
        <dd>vue是当今最流行的前端框架之一</dd>
    </dl>

4，表格

table标签：块元素，显示一个表格。
thead标签：表头部，显示表的头部数据。
tr标签：代表一行。
th标签：代表表头中的一个单元格。
tbody标签：表主体

<!--        行合并：rowspan-->
<td rowspan="2">张三</td>当前td所占的行高是两行的高度 
列合并：colspan
<td colspan="2">25</td>表示当前单元格要占用两列的宽度

5，表单元素

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

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

button：按钮，行内块元素。

<button>按钮</button>

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

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

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">

chechbox：复选框，可以多选。

<label for="">香蕉</label>
<input type="checkbox">
<label for="">苹果</label>
<input type="checkbox">
<label for="">西瓜</label>
<input type="checkbox">

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

<select id="nvyou">
<!-- option 下拉列表项 -->
<option>小明</option>
<option>小红</option>
<option>小刚</option>
</select>

6，HTML语义化标签

1. h1-h6标签，定义页面的标题，h1字体最大，h6最小。

        <h1>1级标题</h1>
        <h2>2级标题</h2>
        <h3>3级标题</h3>
        <h4>4级标题</h4>
        <h5>5级标题</h5>
        <h6>6级标题</h6>

2. header标签，定义页面头部内容，通常包括网站logo、搜索框等。

<header>
    <h1>HTML baseInfo</h1>
    <nav>
        <a>Home</a>
        <a>About</a>
        <a>Setting</a>
     </nav>
</header>

3. nav标签，设置导航菜单。
4. main标签，定义页面的主要内容，一个页面只能使用一次。

<main>
    <h1>Welcome to my blog</h1>
    <p>今天星期一，有大雾</p>
    <p>中午有太阳，吃的陕西哨子面</p>
</main>

5. footer标签，表示页面尾部内容；

<footer>
    firstBlog.html
</footer>

6. dialog标签：定义对话框，比如提示框；

<dialog open>这是打开的对话窗口</dialog>