web前端开发——HTML学习

WEB前端开发

W3C学习网站
MDN学习网站

HTML

从语义角度，描述页面结构

语言不区分大小写，特殊字符要求全小写

html5文件结构

快速编辑：Tab键

<!DOCTYPE html>		文档类型：符合HTML5标准
<htmml lang="en"> 	lang属性：搜索引擎 en英文 zh中文
<head><meta charset="UTF-8"/>	<meta>:元数据charset属性：字符集编码方式浏览器：UTF-8 是国际编码
</head>

字符集与编码

ASCII：数字、英文字母、符号

GB2312：简体中文

Unicode：所有语言

UTF-8：所有语言，占用空间更小

对乱码问题的解释：源文件保存时的编码方式跟源文件声明不同

超链接a

文字超链接
图片超链接
导航栏

<a href="网址">文字或图片</a>

百度

如果链接到本站其他网页，直接放网页名

虚拟超链接
<a href="#"

图像img

图像格式：

JPG有损压缩，色彩丰富
GIF简单动画、背景透明
PNG无损压缩、透明、交错（清晰度从小变大）

<img src="w3school.gif" alt="w3c" />	<!--alt属性为图片不能显示时显示的内容-->
快速拓展：img[src=logo.jpg]

src属性：路径+文件名

“images/logo.png”

绝对路径与相对路径：

绝对路径：以根目录为基准“C:/site/logo.gif ”

相对路径：以文档所在位置为基准“logo.gif ”

区域div

<div id="container" align="center">		<!--id属性起名--><h1>该属性跟css样式作用效果一般</h1>	<div id="nav">第二区域</div>
</div>

区域的划分，便于布局，便于后期用css对区域进行作用。

列表ul ol li

无序列表ul

<h1>前端web</h1>
<ul><li>html</li><li>css</li><li>JS</li>
</ul>
<!--快速生成：ul>li*3-->

有序列表

<h1>web前端</h1>
<ol><li>html</li><li>css</li><li>JS</li>
</ol>

li标签是列表项

表格table tr td

行：tr
单元格：td
<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr>
</table>
<!-- 快速生成：table>tr*n>td*m -->
表格边框属性border="1"
表头单元格：<th>属性</th>

	标签1	标签2
css	1	2

表单与表单元素form

<import type="">	text、password、submit、reset、radio、checkbox
<select><option></option></select>
</import><form>账户：<input type="text" name="userName" /><br />密码：<input type="password" name="userPsd" />
</form>

<form>账户：<input type="text" name="userName" /><br />密码：<input type="password" name="userPsd" /><input type="submit" value="提交" name="submitPsd" />
</form>

<form>账户：<input type="text" name="userName" /><br />密码：<input type="password" name="userPsd" /><input type="submit" value="确定" name="submitPsd" /><input type="reset" value="重置" >
</form>

<form>性别：男	<input type="radio" value="boy" name="gender" checked="checked" />	<!--radio表示单选框，单选name要相同，checked属性表示默认勾选-->女	<input type="radio" value="girl" name="gender" /><br />爱好：<imput type="checkbox" value="1" name="music" checked="checked"/>音乐<imput type="checkbox" value="2" name="sport" />运动<!--checkbox表示多选,name可以不同-->
</form>

下拉列表框select option
<select><option selected="selected">选项1</option><option>选项2</option><option>选项3</option>
</select>

文本域textarea
<form><textarea rows="行数" cols="列数">文本</textarea><br /><input type="submit" value="确定" /><input type="reset" value="重置" />
</form>

个人简介：
请在这里输入内容...

同级拓展：(div>p)+(div>img)

文字拓展：lorem2

段落拓展：lorem

Web语义化

<div id="header"><header>页眉部分</header>
</div>
<em>强调</em>
<i>斜体，无语义</i>
<strong>重点强调</strong>
<b>粗体，无语义</b>

强调
斜体，无语义
重点强调
粗体，无语义

自定义列表dl、列表项dt、描述dd
<dl><dt>HTML</dt><dd>描述语言，自动缩进</dd><dt>CSS</dt><dd>描述语言，自动缩进</dd>
</dl>

实际效果：

HTML

描述语言，自动缩进

CSS

描述语言，自动缩进

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/426712.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！