HTML入门基础
一.关于网页的基础知识
“.com”表示盈利性组织,国际最广泛流行的通用域名格式
“.cn”表示中国国家域名
“.edu”表示教育
“.gov”表示政府单位
域名跟IP地址是绑定的DNS:域名解析服务器
HTML:超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
CSS:层叠样式表。是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态的对网页各元素进行格式化。
- 相对路径:从某一个位置开始的。
绝对路径:从盘服根部开始的
二.HTML的基本结构
<html>
<head><!--头部-->
<title>这里写标题</title>
</head>
<body><!--主体-->
</body>
</html>
三.Webstorm中的基础操作
- 新建工程:打开webstorm–Empty Project–选择存放路径–File–New–Html
- 调整字体大小:File–Setting–Editor–Colors&Fonts–Font–Save As…(OK)–设置size
- 测试文本:Lorem+Tab
- 测试路径:ctrl+鼠标悬停
- 浏览文件快捷键:Alt+F2
四.HTML中的基础标签
段落标签:
<p>里面放想写的内容</p>
标题标签:
<hn>标题名称</hn>
(n=1、2、…、6。n越大,字体越小。一个页面中h1只能使用一次。)图片标签:
<img src="图片路径" alt="图片描述/代替图片的文字" title=“描述属性”/>
其中“src”、“alt”和“title”都属于“img”的属性。“img”还有另外两个属性是:宽width=” XXpx”,高height=”XXpx”。宽和高只设置一个的时候就是等比例缩放。(插入时一张图片一个img标签。)超链接标签:
<a href="跳转目标网址(Eg:http://www.baidu.com)">跳转名称</a>
当href=”#”时,为固定连接。
属性:target=”目标窗口的打开方式(“_parent”在原窗口打开/”_blank”在新页面中打开)”换行标签:
<br>
(单标签)分隔线标签:
<hr>
(单标签)
属性:size=”XXpx(线的粗细)”
color=”red/rgb(255.0.0)/#FF0000(线的颜色)”
width=”XXpx/XX%(线的长短)”定义文字样式标签(双标签)
定义粗体文本<b> 定义小号文字<small> 定义上标字<sup>
定义着重文字<em> 定义加重语气<strong> 定义插入字<ins>
定义斜体文字<i> 定义下标字<sub> 定义删除字<del>
8.列表标签
(1) 无序列表:
<ul type="square方块/disc圆点/circle空心圆(图标样式)">
<li></li> <!--内容,一行一个-->
</ul>
(2)有序列表:
<ol type="a/A/I/i/1(序标类型)" start="n(起始数字)">
<li></li>
</ol>
(3)自定义列表:
<dl>
<dt></dt><!--标题-->
<dd></dd><!--描述-->
</dl>
9.表格标签:
<table border="Xpx(边框线)" width="Xpx(宽度)" cellpadding="(Xpx字靠边线的距离)" cellspacing="Xpx(单元格的间距)" >
<caption></caption><!--表头-->
<tr> <!--行,从上往下一行一个tr标签-->
<th></th><!--标题,属性:跨列colspan="n"/跨行rowspan="n"(<td>中也适用)-->
<td></td><!--单元格,从左往右一个单元格一个td标签-->
</tr>
</table>
10.表单标签(例):
<form action="提交的目标地址" method="get(明文)/post(暗文)">
<p>
<label for="usename">用户名:</label>
<input type="text" id="usename"/>
</p><!--单行文本框-->
<p>
密码:<input type="password"/>
</p><!--密码框(看不见)-->
<p>
性别:<input type="radio" name="sex" checked>女
<input type="radio" name="sex">男
</p><!--按钮组(当name相同时会变成单选按钮,checked为默认选择)-->
<p>
爱好:<input type="checkbox" checked/>音乐<br>
<input type="checkbox"/>看书<br>
<input type="checkbox"/>体育
</p><!--复选框,checked为默认选中-->
<p>
地址:
<select>
<option value="陕西" selected>陕西</option>
</select>
</p><!--下拉菜单,select mutiple-->
<p>
上传头像:<input type="file"/>
</p><!--文件域-->
<p>
留言板:<textarea name="" id="" cols="" rows="">
</textarea>
</p><!--多行文本域-->
<p>
<input type="submit"/><!--提交按钮-->
<input type="reset"/><!--重置按钮-->
<button>取消</button><!--自定义按钮-->
</p>
</form>