#开发环境
#开发软件
记事本,notepad++ hbuilder vscode
#运行软件
浏览器:谷歌 + 其他(市场占有率比较高的浏览器)
#html页面结构
<!doctype html> 告诉浏览器以下的代码都已html5的方式解析
<html> 主题
<head>
<mate chaset="utf-8">
<title>左上角命名</title>
</head>
<body>
hello world
</body>
</html>
# heml语法与元素
-注释 <!-- -->
-文本 / 字符串
-标签(不区分大小写,一般使用小写)
-单标签
-双标签
继续嵌套其他标签或者字符串
空格
-属性
<标签名 属性名=“属性值” 属性名=“属性值”></标签名>
#前端常见的标签
#字体标签<font></font>
作用:设置某个区域的文本字体
属性:color=“red” 颜色
size=“1” 字体大小1~7
face=“宋体” 字体类型
#对齐格式
左对齐:left 居中:center 右对齐:right
#段落标签(块级元素,一个占一整行)
<p></p>
<br> 换行
<hr> 分割符
-标题标签<h1></h1>~<h6></h6>
#图片<img>
作用:承载图片 / 访问服务器
属性:src="路径" width=“数字” height=“数字”
#超链接 <a></a>
作用:页面跳转 / 访问服务器
属性:href=“地址”
1.跳转本地页面,填写相对路径
2.跳转外网的网址,网址前加 http://
#下拉选项标签
<select>
<option></option>
<option></option>
<option></option>
</select>
#表单输入标签<input> 有多种形态
属性:
type="text" 文本框
type="password" 密码框
type="button" 按钮 value=" "
type="checkbox" 复选框 √
type="radio" 单选框
type="file" 文本选择器
type="date" 日期选择器
placeholder="显示内容" (当没有输入时文本框显示内容)
#表格标签
<table></table> 表格的主体标签
属性 border="1" (表格边框)
width height 表格,单元格
bgcolor 表格,单元格
align="left" center right
<thead></thead> 表格的表头
<th></th> 表头中的单元格
<tbody></tbody> 表格的身体
<tr></tr> 表格的行
<td></td> 表格的普通单元格
#合并单元格
水平方向合并 colspan="格数"
垂直方向合并 rowspan="格数"
水平+垂直 colspan rowspan