[ HTML 前端 ] 语法介绍和HBuilderX安装
目录
一. HTML
1.概述
2. 安装前端开发工具
(1)HBuilderX下载
(2)创建html项目和使用
3. HTML基础
1.标签
(1).标签定义:
(2).标签结构:
(3).标签属性:
2.常用标签:
3.特殊符号:
4.表格(table)
(1)基本标签:
(2)基本结构:
(3)表格属性:
5.表单(form)
(1). 表单概述:
(2). 常见用法
1)文本表单
2)常见表单
3)下拉框
4)文本域
5)按钮
(3). 代码举例:
一. HTML
1.概述
HTML(HyperText Markup Language)是超文本标记语言, XML 是可扩展标记语言 ,用来存储数据. 二者都是以ML(Markup Language) 标记语言结尾
HTML用来标记网页内容,里面提供了各自不同功能的标签, 例如在网页中显示超链接,图片.
通过使用标签来修饰网页内容,在浏览器中运行解释网页,最终运行出我们想要的效果.
2. 安装前端开发工具
(1)HBuilderX下载
HBuilderX-高效极客技巧
(2)创建html项目和使用
内容解释
(1)文档声明:
声明html语言版本 例如html5,主要就是告诉浏览器如何解析 ,可以避免产生一些不可预期的行为
html4的文档声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
html5的文档声明:
<!DOCTYPE html>
(2)头部
头部区域的标签为: <title>, <style>, <meta>, <link>, <script> 例如:
<title> 定义网页的标题
<meta> 位于文档的头部, 提供有关页面的元信息(meta-information) 例如针对搜索引擎和更新频度的描述和关键词。<meta charset="utf-8" />
<link rel="icon" href="ico地址"> 标题处添加图标
运行代码
3. HTML基础
1.标签
(1).标签定义:
用于描述网页
(2).标签结构:
1) <标签名> 标签内容 </标签名> 闭合标签(有标签内容)
2) <标签名/> 自闭合标签 (无标签内容)
(3).标签属性:
1) 定义: 用来说明当前标签的显示或使用 例如:<body text=”red”>
2) 格式: 属性名 = “属性值“
3) 位置: <标签名 属性名 = “属性值“ >xxx</标签名>
4) 注意: 一个标签可以添加多个属性:<标签名 属性名 = “属性值“ 属性名 = “属性值“... >
2.常用标签:
(1)标题标签 <h1>一级标题</h1>…..<h6>六级标题</h6>
(2)段落标签 <p></p>
(3)换行标签 <br/>
(4)分割线标签 <hr/>
(5)列表标签 无序列表<ul><li></li></ul> 有序列表<ol><li></li></ol>
(6)超链接 <a></a>
超链接: 通过链接访问其他网页资源
例如: <a href=“http://www.baidu.com” target=“_blank”>百度</a>
<a href=“地址” target =“窗口”>内容</a>
target : 默认值为_self 当前窗口 _blank 新窗口
href (Hypertext Reference 超文本引用) : 规定链接指向的页面的URL(页面地址)
URL (Uniform Resource Locator) : 统一资源定位符
(7)图像标签 <img/>
例如 : <img src=“img/demo.jpg” width=“300” height=“150“ border= ” 1 ”/>
src : 图像的路径
width / height: 图像的宽度 / 高度
border: 图像边框的粗度
px: 像素单位
3.特殊符号:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body bgcolor="yellow"><!-- 设置背景颜色 --><b>我的<b/>第一<br/>张网页<!-- <font color="red" size ="7">百度<font/> --><font color="red" >百度<font/><!-- 设置字体颜色 --><!-- 标题标签 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>.....<h6>六级标题</h6><!-- 段落标签 --><p>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</p><p>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</p><p>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</p><!-- 换行 添加在谁后面就从哪里换行 -->换行<br>这是一个段落,这是事实<br>上是一段落<!--列表 分为<ul></ul> 无序列表 和 <ol></ol有序列表--><ul><li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li><li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li><li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li></ul><ol type="I"><li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li><li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li><li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li></ol><!--图像--><img src ="img/baidu.ico" /><img src ="img/baidu.ico" width="300" height="100" boder="2"/><!-- 超链接 --><!-- 在当前窗口打开 --><a href="https://www.bilibili.com/" target="_self" >哔哩哔哩</a><!-- 在新窗口打开 --><a href="https://www.bilibili.com/" target="_blank" >哔哩哔哩</a><!-- 特殊符号 --><!-- <小于号 >大于号 --><b>----><hr/>分割线<!-- 空格 -->aaaaa bbbbbbb<!-- 注册商标 ®-->®<!-- 版权 © -->©</body>
</html>
页面展示:
4.表格(table)
(1)基本标签:
table标签：表格标签
tr标签：表格中的行
th标签: 表格的表头
td标签：表格单元格
(2)基本结构:
<table>定义表格
<tr>定义表行,一个tr就是一行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td> 当前行的列
</tr>
</table>
(3)表格属性:
width 宽度 可以设置 表格 单元格...
height 高度 可以设置表格 单元格...
cellspacing 单元格之间的距离
cellpadding 内容到单元格边框的距离
align 对齐方式
valign 内容位置
cospan 跨列合并单元格
rowspan 跨行合并单元格
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 表格 --><table border="1" width="800" height="400" cellspacing="10" ><!-- border边框 width宽度 height高度 cellspacing单元格之间的距离 --><tr height="60" align="center"><!-- align(对齐方式): center水平居中对齐 right右边对齐 left左边对齐--><td>项目</td><td colspan="5">上课</td><td colspan="2">休息</td></tr><tr align="center" ><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr align="center"><td rowspan="4">上午</td><!-- rowspan(跨行合并单元格)= "合并的个数" --><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="4" valign="bottom">休息</td><!-- valign(文本位置): bottom底部 top顶部 --></tr><tr align="center"><td>数学</td><td>数学</td><td>地理</td><td>化学</td><td>历史</td><td>计算机</td></tr><tr align="center"><td>语文</td><td>数学</td><td>历史</td><td>计算机</td><td>物理</td><td>化学</td></tr><tr align="center"><td>数学</td><td>数学</td><td>地理</td><td>化学</td><td>历史</td><td>计算机</td></tr><tr align="center"><td rowspan="2">下午</td><td>数学</td><td>数学</td><td>地理</td><td>化学</td><td>历史</td><td>计算机</td><td rowspan="2">休息</td></tr><tr align="center"><td>数学</td><td>数学</td><td>地理</td><td>化学</td><td>历史</td><td>计算机</td></tr></table><table border="1" width="500" cellpadding="5"><!-- cellpadding 文本到单元格边框的距离 --><tr ><td>姓名</td><td> </td><!--  空格 --><td>性别</td><td> </td><td rowspan="5" width="80" align="center">照片</td></tr><tr><td>出生年月</td><td> </td><td>籍贯</td><td> </td></tr><tr><td>政治面貌</td><td></td><td>民族</td><td></td></tr><tr><td>将康状况</td><td></td><td>婚姻情况</td><td></td></tr><tr><td>联系电话</td><td></td><td>电子邮箱</td><td><www class="51jianli"></www></td></tr><tr><td>求职意向</td><td colspan="4"></td> <!-- colspan(跨列合并单元格)="合并的个数" --></tr><tr ><td height="250">工作经历</td><td colspan="4"></td></tr><tr><td height="60">教育经历</td><td colspan="4"></td></tr><tr><td height="60">英语水平</td><td colspan="4"></td></tr><tr><td height="60">计算机水平</td><td colspan="4"></td></tr><tr><td height="60">自我评价</td><td colspan="4"></td></tr></table></body>
</html>页面展示:
5.表单(form)
(1). 表单概述:
网页的表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器
(2). 常见用法
1)文本表单
2)常见表单
3)下拉框
4)文本域
5)按钮
(3). 代码举例:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="server.html" method="get"><!-- action:指定提交后，由服务器上那个处理程序处理(java程序) method: 指定向服务器提交的方法,一般为post或get方法, post方法比较安全-->用户名:<input type="text" name="count" value="zhangsan" readonly="readonly"/><br/><!-- readonly="readonly"只读,提交表单时,可以提交数据 value就是输入的值 在输入框输入的内容,会赋给value属性-->密码:<input type="text" name="password" placeholder="请输入密码" disabled="disabled"/><br /><!-- placeholder="提示内容,当输入框输入内容后提示自动消失" --><!-- disabled="disabled"禁用 ,禁用之后不能提交数据 -->性别:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<!--type="radio"单选框 ; name="gender"通过name属性分组,值相同时就是一组,会互斥 ,避免出现同时勾选上男和女--><br />课程:<input type="checkbox" name="couse" value="java"/> java<input type="checkbox" name="couse" value="c++"/> c++<input type="checkbox" name="couse" value="python"/> python<input type="checkbox" name="couse" value="高数"/> 高数<!-- type="checkbox" 复选框(多选)--><br />省份:<select name ="provice"><!-- 下拉选择框 --><option>请选择</option><option value="1001">北京</option><option value="1002" selected="selected">天津</option><!-- selected="selected"下拉选择框默认值 --><option value="1003">上海</option></select><br />附件:<input type="file" name="file"/> <br/><!-- 选择文件 -->备注:<textarea cols="30" rows="5" name="mark"></textarea><!-- 文本域 --><br /><br /><input type="submit"/><!--提交按钮 可以触发表单的提交 --><input type="reset"/><!-- 重置按钮 --><input type="button" value="保存"/></form></body>
</html>页面展示:
