HTML学习（一）

首先说下什么是HTML：

百度百科的结果是：HTML是用来描述网页的一种语言，指的是超文本标记语言，不是一种编程语言，是一种标记语言

1、HTML的基础

在HTML中有标题、段落、链接、图像等组成

1.1 HTML的标题

标题是通过<h1></h1> 标签来进行定义，其中<hr /> 标签表示一个水平分割线

1.2、HTML的段落

段落是通过<p> 标签来进行定义，其中<br /> 标签表示换行

1.3、HTML的连接

链接是通过<a> 标签来进行定义

1.4、HTML中的图片

图片是通过<img>标签来进行定义

举例如下：

<h1>HTML 学习标题</h1>
<p>这是一个段落</p>
<a href="https://www.baidu.com/">这是一个百度链接</a>
<img src="./1.jpg" width="30" height="40">

src属性表示图片存放地址，：

“.” 在路径中代表当前网页所在目录

".." 在路径中代表当前网页所在目录的上一级目录

效果图如下：

1.5、 HTML 样式

通过style 标签来改变HTML元素的样式

1.6、HTML 表格

<table border="1">
    <tr>
        <td>姓名</td>
        <td>电话</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>123213213</td>
    </tr>

1.7、HTML 下拉框

交通工具：<select id="traffic">
    <option value="0">公交车</option>
    <option value="1">自行车</option>
    <option value="2">汽车</option>
</select>

效果图如下：

select： 下拉列表标签

option： 下拉列表数据标签

value： 为数据标签的数据值，其中该值会提交到服务器

备注：如何实现在下拉框中选择多个值呢？ 可以在select 标签中添加一个属性即可

multiple="multiple"

1.8 HTML 的input 标签（输入框）

用户名：<input id="name" type="text" />
密码：<input id="password" type="password" />
爱好：<input id="hoby" type="checkbox"> 爬山</input>
     <input id="hoby" type="checkbox"> 跑步</input>

type： text 表示是一个文本文档

type： password加密框，输入的内容会进行加密处理

type： checkbox 选择框

1.9、HTML 多选 checkbox、单选radio操作

<form>水果：
    <label><input id="fruit" type="checkbox"> 苹果</input></label>
    <label><input id="fruit" type="checkbox"> 香蕉</input></label>
    <label><input id="fruit" type="checkbox"> 芒果</input></label>
    <label><input id="fruit" type="checkbox"> 梨</input></label>
</form><br/>
<form>居住地：
    <label><input name="address" type="radio"> 上海</input></label>
    <label><input name="address" type="radio" checked="checked"> 北京</input></label>
    <label><input name="address" type="radio"> 西安</input></label>
    <label><input name="address" type="radio"> 深圳</input></label>
</form>

其中注意

1、对于单选 操作，同组的必须name 属性值相同，就算是id 属性相同，name不同，也不会实现其单选效果

2、加上 checked=“checked” 属性值，可以实现初始默认值，上面代码默认选中 北京

2、HTML 组成

HTML 是由一些标签组成，标签中包含其属性及内容，其中标签属性常见的有id、name、href 等等，通过这些属性来描述

2.1、属性

举例：比如说在 <h1> 所定义的标题进行居中显示：可以添加 align =“center” 这个属性来达到其效果

<h1 align="center">HTML 学习标题</h1>