文章目录
HTMLHTML基本结构网页的基本标签标题标签段落标签换行标签水平线字体样式标签HTML注释和特殊符号图像标签常见的图片格式语法案例链接标签页面间链接语法锚链接锚链接创建步骤功能性链接列表列表的分类无序列表有序列表定义列表表格基本结构语法表单语法表单元素格式表单的高级应用表单示例块元素标签行内元素标签HTML
定义：Hyper Text Markup Language（超文本标记语言）
HTML基本结构
1、网页头部2、网页主体3、标签
<html><head><title>网页标题</title></head><body>网页的主体</body></html>
网页的基本标签
标题标签
1、<h1>...</h1>2、<h2>...</h3>3、<h3>...</h3>4、<h4>...</h4>5、<h5>...</h5>6、<h6>...</h6>
段落标签
<p>....</p>
换行标签
<br/>
水平线
<hr/>
字体样式标签
<strong>字体加粗</strong><em>斜体</em>
HTML注释和特殊符号
<html><head><title>这是网页标题</title></head><body><h1>这是一级标题</h1><hr/><!--这是水平线标签--><p>这是段落标签<br/>换行标签<br/><strong>字体加粗</strong><em>斜体</em><br/>百度 |搜狗 <br/>5>3 <br/><!--5>3-->3<5 <br/><!--3<5-->我说："你在干嘛？" <br/><!--我说："你在干嘛？"-->版权符号：Copyright©CSDN</p></body></html>
图像标签
常见的图片格式
1、JPG2、GIF3、PNG4、BMP
语法
<img src="path" alter="图片不能正常显示的时候，在图片处现实的文字" title="鼠标移到图片上现实的文字" width="图像的宽度" height="图片的高度">
案例
<html><head><title>标题</title></head><body><img src="images/M416.jpg" alt="这是一把M416步枪" title="M416自动步枪" width="200" height="200"><p>刺激战场 刚枪首选<br/>颜色棒棒哒美滋滋<br/> ￥11</p></body></html>
链接标签
页面间链接
从一个页面连接到另外一个页面
语法
<a href="路径" target="目标窗口位置（_blank新窗口打开，_self在原窗口打开）">链接内容</a>
<a href="new.html" target="_self" >javaScript权威指南</a><a href="new.html" target="_blank"><img src="images/book.jpg"></a>
锚链接
1、从A页面的甲位置跳转到本页中的乙位置2、从A页面的甲位置跳转到B页面中的乙位置
锚链接创建步骤
1、创建跳转标记<a name="marker">乙位置</a>2、创建跳转链接<a href="#marker">甲位置</a>
功能性链接
1、电子邮件2、QQ3、MSN
<!--示例--><a href="mailto:邮箱地址">联系我们</a>
列表
定义：列表就是信息资源的一种展现形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
列表的分类
1、无序列表2、有序列表3、定义列表
无序列表
特性：1、没有顺序，每个<li>标签独占一行2、默认<li>标签项有一个实心小圆点3、一般用于无序类型的列表，如导航、侧边栏新闻，有规律的图文组合模块等
<ul type="circle"><!--声明无序列表,默认黑心小圆点desc，circle是空心圆，square是黑心小方块--><li>新时代新需求心前段</li><!--声明列表项--><li>前段就业前景广阔啊</li><li>jweb前段开发技术流</li><li>公司前段进行向第三</li></ul>
有序列表
特性：1、有顺序，每个<li>标签独占一行2、默认<li>标签项前面有顺序标记3、一般用于排序类型的列表，如试卷、问卷选项等
<!--默认有序列表数字1 有A,a,I,i--><ol><li>新时代新需求心前段</li><!--声明列表项--><li>前段就业前景广阔啊</li><li>jweb前段开发技术流</li><li>公司前段进行向第三</li></ol>
定义列表
特性：1、没有顺序，每一个<dt>标签、<dd>标签独占一行2、默认没有标记3、一般用于一个标题下有一个或多个列表项的情况
<dl><!--声明定义列表--><dt>水果</dt> <!--声明列表项--><dd>苹果</dd><!--定义列表项内容--><dd>香蕉</dd><dt>蔬菜</dt><dd>土豆</dd><dd>西红柿</dd></dl>
表格
优点：简单通用，结构稳定
基本结构
1、单元格2、行3、列
语法
<!--默认没有边框--><table border="1" width="500"> <!--边框设置成1px ,高度为500px--><tr><th>一行一列的标题</th><th>一行二列的标题</th></tr><tr><td>一行一列的单元格</td><td>一行二列的单元格</td></tr><tr><td>二行一列的单元格</td><td>二行二列的单元格</td></tr>....<table>
跨行：colspan="?";
跨列：rowspan="?";
表单
作用：收集数据的时候会使用，例如：登录、注册
语法
<from method="post/get" action="result.html"><!--method规定发送表单的方式，get提交不安全，post会比较安全，action表示向何处发送表单--><p>用户名 <input name="name" type="text" /></p><p>密 码 <input name="pwd" type="password" /></p><p><input name="button" type="submit" value="提交" /><input name="reset" type="reset" value="重置" /></p></from>
表单元素格式
<!--语法--><input type="元素类型" name="元素名称" value="元素的值">
type的类型：
表单的高级应用
1、隐藏域(hidden)语法：<input type="hidden" value="传递的值" name="名称" />2、只读(readonly)语法：<input type="" value="" name="" readonly/>3、禁用(disabled)<input type="" value="" name="" disabled />应用场景：在客户点击阅读并同意协议后disable取消4、placeholder:提示文字扩展：单选框默认选择（checked）下拉列表默认选择（selected）
表单示例
<form action="register.html" method="POST"><p>用户名 <input type="text" name="userName" size="16" value="admin" readonly /></p><p>密 码 <input type="password" name="pwd" size="16" value="" maxlength="16" /></p><p>性 别 <input type="radio" name="sex" value="man" checked />男 <!--单选框默认选中关键字checked--><input type="radio" name="sex" value="weman" />女</p><p>爱 号 <input type="checkbox" name="hobby" value="swim" />游泳<input type="checkbox" name="hobby" value="run" />跑步<input type="checkbox" name="hobby" value="climb" />爬山<input type="checkbox" name="hobby" value="read" />读书</p><p>出生日期<input type="text" name="year" size="4" maxlength="4"/>年<!--下拉列表--><select name="month" id=""> <!--多选框默认选中是selected--><option value="1">1月</option><option value="2" selected>2月</option><option value="3">3月</option><option value="4">4月</option><option value="5">5月</option><option value="6">6月</option><option value="7">7月</option><option value="8">8月</option><option value="9">9月</option><option value="10">10月</option><option value="11">11月</option><option value="12">12月</option></select>月</p><p>自我介绍<textarea name="introduce" id="" cols="30" rows="10">写下你的自我评价</textarea></p><p><input type="file" name="files"></p><p><input type="button" name="btn" value="普通按钮" /> <input type="submit" name="submit" value="注册" disabled/> <input type="reset" name="reset" value="重置" /></p></form>
块元素
定义：无论内容多少，该元素独占一行（p、（h1~h6）、li...）
标签
使用举例：<p><span>提示：</span> 请注意操作的合法性。 </p>作用：可用来座文本的容器，能让某几个字或者某个词语凸显出来属于行内元素
行内元素
定义：内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em...）
标签
使用举例：<div>网页内容</div>作用：可以把文档分割为独立的、不同的部分；排版网页内容；网页布局属于块级元素
HTML基本结构 标签 列表 表格 表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
如果觉得《HTML基本结构 标签 列表 表格 表单 form input 单选框radio 》对你有帮助，请点赞、收藏，并留下你的观点哦！
