10.28 HTML
一 概述
1.WebStorm更改字体大小方法:File-Setting-Editor-Color&Fonts-Font-Save As-Size(25/30)
2.站点-网站-网页(网址/域名: .com盈利性组织, .cn中国(hk/tw/us),.edu教育机构, .gov政府)
3.DNS:域名解析(WebStorm HTML5 编码:UTF-8)
HTML:超文本标记语言
CSS:层叠样式表
4.网页打开方式:Opera/Google/火狐/IE/Safari
5.WebStorm快捷键:
① AIT+F2=浏览文件
② Shift+F6=重命名(鼠标右键-Refactor-Rename)
③ p+Tab=<p></p>
④ Ctrl+鼠标悬停=测试路径(当路径下方有蓝色线时路径通,绝对路径/相对路径(常用))
6.网页中空格的输入方式:
① &nsbp; 表示一个半角空格
② 全角情况下打空格
7.HTML结构标签
<html>
<head>
<title></title>
</head>
</html>
8.其他标签
(1)双标签
① <p></p> 段落标签
② <h1>/<h1> 标题标签 (h1-h6,标题大小递减,h1一个页面只能有一个)
③ <A href="跳转目标地址" target="目标窗口"></A> 超链接
(目标窗口:_blank 在新窗口打开/_parent 在原窗口打开)
④ <pre></pre> 文本预格式化
⑤ <ul type="图标样式"> (type="square/disc/circle,方块/实心圆/空心圆",默认为disc)
<li></li>
</ul> 无序列表
⑥<ol type="类型"start="起始数字"> (type="a A 1 I i")
<li></li>
</ol> 有序列表
⑦<dl>
<dt>标题</dt>
<dd>描述</dd>
</dl> 自定义列表
⑧<table border="边框线" width="宽px" cellspacing="单元格间距"cellpadding="单元格填充">
<caption>表头</caption>
<tr>
<th colspan="跨列数" rowspan="跨行数"></th> 标题单元格
<td></td> 单元格
</tr> 行
</table> 表格
⑨<form action="提交目标地址" method="get/post">
</form> 表单
表单元素:
单行文本框 <label for="name"></label>
<input type="text" id="name"/>
(id=for 将文本框同标签文字绑定,点击标签文本时在文本框中显示光标)
多行文本域 <textarea>留言板</textarea>
密码框 <input type="password"/>
单选按钮 <input type="radio" name=""value="选项值" checked/>选项值
(多个radio的name值相同表示单选按钮组,checked表示默认选项)
多选框 <input type="checkbox"value="选项值" checked/>选项值
文件域 <input type="file"/>
提交按钮 <input type="submit"/>
重置按钮 <input type="reset"/>
普通按钮 <input type="button">
按钮 <button></button>
下拉菜单 <select>
<option value="值" selected>值</option>
</select> (下拉菜单内容不显示)
下拉列表 <select multiple>
<option value="值" selected>值</option>
</select> (下拉列表内容显示)
⑩<style></style> 样式标签
⑪<div></div> 分区标签
(2)单标签
<img src="图片路径" alt="描述" title="图片注释" width="宽" height="高"/ > 插入图片
(alt: 网速较慢代替图片的文字 title: 鼠标悬停于图片时显示的文字 宽高单位:PX(像素))
<br> 换行符
<!—注释--> HTML注释
/*注释*/ css注释
<hr size="线的粗细" color="线的颜色" width="线的宽度"> 分隔线
二 例子
1.结构标签
2.标题标签
3.图片标签
4.超链接标签
5.单元格跨列
6.单元格跨行
7.文本效果
8.预格式标签
9.列表
10.表单