HTML和CSS入门（1）
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>上一篇： CSS边框和背景1
下一篇： php 二级联动菜单