前言:对于语义化的理解
*HTML的精髓就在于标签的语义。在HTML中,大部分标签都有它自身的语义,例如p标签,表示的是"paragraph",标记的是一个段落;hl标签,表示“headerl”,标记的是一 个最高级标题……而div和span是无语义的标签,我们应该尽可能少用。 * HTML很简单,因此很多初学者往往忽略了它的目的和重要性。我们学习HTML并不 是看自己学了多少标签,更重要的是在你需要的地方能否用到正确的语义化标签。把标签用在对的地方,这才是HTML学习的目的所在。
(1)HTML是什么?
HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。 # 对世纪佳缘注册页面网站进行分析
HTML的基本标签
(1)HTML标签 整个网页是从这里开始的,然后到结束。
(2)head标签 head标签代表页面的“头”,定义一些特殊内容,这些内容往往都是“不可见内容”(在浏览器不可见)。
< head>内部标签
< title> 定义网页的标题
< meta> 定义网页的基本信息(供搜索引擎)
< style> 定义CSS样式
< link> 链接外部CSS文件或脚本文件
< script> 定义脚本语言
< base> 定义页面所有链接的基础定位(用得很少)
< head>的内部标签也非常重要,在前期大家只需要感性认知就可以。
(3)body标签 body标签代表页面的“身”,定义网页展示内容,这些内容往往都是“可见内容”(在浏览器可见)。
第一步观察页面元素
包含文本框、单选、日期选择、下拉选择、标签选择、插入图片、提交按键、默认选择按键(用户条款),将html部分单独拿出来,如下图
第二步分析
- h1标签:网站大标题<h 1 class="r-h1" style="color:#f3316b;">青春不常在,抓紧谈恋爱</ h1> div标签:<d。iv class="r-h1-tite"> 花点时间填写真实信息,我们会让结果更合您的心意。 </d iv> div标签作为块级标签,独占一行,可以当此处的提示词,而h1标签作为一级标题标签,更加大加粗。
整个网页是从这里开始的,然后到结束。
head标签代表页面的“头”,定义一些特殊内容,这些内容往往都是“不可见内容”(在浏览器不可见)。
body标签代表页面的“身”,定义网页展示内容,这些内容往往都是“可见内容”(在浏览器可见)。
<dd> <input id="nan" class="ir" value="m" type="radio" name="sex"> <label class="sex nan" for="nan">男</label> <input id="nv" class="ir" value="f" type="radio" name="sex"> <label class="sex nv" for="nv">女</label> </dd>
<dt>学历</dt> <dd style="z-index: 0;"> <div class="i-w"> <input id="education" name="education" value="" type="hidden"> <input id="edu" class="te w_input" type="text" value="请选择" will="" readonly="readonly"> <span class="re right w_icon"> </span> <div class="jy-sel-o jy-sel-oh" id="edu-o" style="display: none;"> <ul> <li><a href="###" will="10">高中中专及以下</a></li> <li><a href="###" will="20">大专</a></li> <li><a href="###" will="30">本科</a></li> <li><a href="###" will="40">双学士</a></li> <li><a href="###" will="50">硕士</a></li> <li><a href="###" will="60">博士</a></li> </ul> <!--fillet--> <div class="fillet fillet-tl"> </div> <div class="fillet fillet-tr"> </div> <div class="fillet fillet-bl"> </div> <div class="fillet fillet-br"> </div> <!--/fillet--> </div> </div> </dd>
<dd class="er"> <div class="prompt" id="monthlyTip"> <p>请选择您的月薪</p> <span class="cil tl"> </span> <span class="cil tr"> </span> <span class="cil bl"> </span> <span class="cil br"> </span> <span class="lm"> </span> </div> </dd>
HTML 中的< span>标签被视为内联元素。它类似于 div 标记,但 div 标记特意用于块级元素,而 span 用于内联元素。它主要用于用户想要将内联元素分组到其代码结构中。HTML 中的 Span 标记用于通过使用元素类或 id 属性为特定内容提供样式。使用 HTML 文档中的 span 标记本身无法进行视觉更改。它用作 HTML 文档中的内联标记。在代码中使用 span 标记有助于减少代码和 HTML 属性。
4、
关于选择的分析 单选框:
以性别的单选为例子: 保密 男 女
多选:
🍎 🍉