首先说下什么是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 标签(输入框)
type: text 表示是一个文本文档用户名:<input id="name" type="text" /> 密码:<input id="password" type="password" />爱好:<input id="hoby" type="checkbox"> 爬山</input> <input id="hoby" type="checkbox"> 跑步</input>
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>