HTML语义化标签-Web 前端开发精华文章推荐（jQ...-jQuery+PHP获取Select option 选择的Text和Value(附选择城市实例)

当前位置: 编程技术>WEB前端

本页文章导读:

▪HTML语义化标签什么是语义化标签？ HTML赋予了每个标签以不同的语义。高质量的HTML代码，要求我们在遵循HTML语法的同时，也应该遵循HTML的标签语义，如： div 语义：Division(分隔) span 语义：Span(范围) ol .........

▪Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十三】　　2013年第一期（总第十三期）《Web 前端开发人员和设计师必读文章》和大家见面了。梦想天空博客关注前端开发技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿.........

▪jQuery+PHP获取Select option 选择的Text和Value(附选择城市实例) PHP代码： <li> <span class="l2">所在城市</span> <select class="city"> <option value="">选择所在城市</option.........

[1]HTML语义化标签

来源: 互联网发布时间: 2013-11-06

什么是语义化标签？

HTML赋予了每个标签以不同的语义。高质量的HTML代码，要求我们在遵循HTML语法的同时，也应该遵循HTML的标签语义，如：

div 语义：Division(分隔)
span 语义：Span(范围)
ol 语义：Ordered List(排序列表)
ul 语义：Unordered List(不排序列表)
li 语义：List Item(列表项目)
...

HTML常用标签语义：

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减。<h1>是最高的等级。

由于一些浏览器会默认地把 <h1> 元素显示为很大的字体，因此会有一些 web 开发者使用 <h2> 元素代替 <h1> 元素来显示最上层的标题。这样做不会对读者产生影响，但会使那些试图“理解网页结构

”的搜索引擎和其他软件感到迷惑。

请确保把 <h1> 用于最顶层的标题，<h2> 和 <h3> 用于较低的层级。

从语义上讲，它们应该适用于所有标题文字。

但这里会出现一个语义上的分歧。h1究竟该理解为一级标题呢还是理解为1号字体大小的标题。我通常理解为一级标题，一级标题下再有小标题就用h2。但是事实上回顾HTML设计之初，h1-h6后面的数字

更多的被理解为控制标题文字大小的。用h3或许只是为了使用三号大小的字体，而并非它就是三级标题。否则一级标题全用h1，个个都是斗大的字，又不得不用CSS来控制字号，感觉很累赘。所以，这是

一个待商榷的问题。
例如：

Code:

<b>标签与<strong>标签

<b>：标签语义为“加粗”

<strong>：标签语义为“强调”

当我们知道了<b>标签和<strong>标签的语义时，做SEO时就好决定用哪个来强调重要的关键字了，强调用<strong>，纯粹加粗用<b>

<ul>标签、<ol>标签、<li>标签

<ul>语义: 定义无序列表

<ol>语义：定义有序列表

<li>语义：定义列表项目

所以涉及到列表的项目，应该用<ul><li>或<ol><li>来布局，而不是用<table>或<p>甚至<span>，当然也可以用<dl><dt><dd>

应该要补充的是，别忘了li里面还可以再用ul或ol，形成第二级列表。

<dl>标签、<dt>标签、<dd>标签

<dl>语义：定义了定义列表

<dt>语义：定义了定义列表中的项目（即术语部分）

<dd>语义：定义列表中定义条目的定义部分

一些带标题的列表可采用<dl><dt><dd>自定义列表

<span>标签

<span>语义：被用来组合文档中的行内元素

列如：

Code:

p span { color:#ff0000; font-weight:bold; }

<p>

<span>提示：</span>：这是提示内容

</p>

可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

<table>语义：定义 HTML 表格

<th>语义：定义表格内的表头单元格

<caption>语义: 定义表格标题

<button>标签、<input>标签、<textarea>标签

<button> 标签定义一个按钮

<input> 标签用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<button> 控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或

多媒体内容。

<textarea>语义：定义多行的文本输入控件

<label> 标签

<label>语义：为 input 元素定义标注（标记）

<center>，<font>不建议使用

作者：gtd03 发表于2013-2-25 9:25:39 原文链接

阅读：0 评论：0 查看评论

[2]Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十三】

来源: 发布时间: 2013-11-06

　　2013年第一期（总第十三期）《Web 前端开发人员和设计师必读文章》和大家见面了。梦想天空博客关注前端开发技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的网页设计案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心推荐的文章能够帮助到您。

jQuery 插件和教程

期待已久的2012年度最佳 jQuery 插件隆重揭晓
精心推荐：10款非常时尚的 jQuery 图片切换插件
精心挑选：12款优秀 jQuery Ajax 分页插件和教程
精心挑选：23款美轮美奂的 jQuery 图片特效插件
精心挑选：15款优秀 jQuery 文本特效插件和教程
六款帮助你实现惊艳视差滚动效果的 jQuery 插件
基于 jQuery & CSS3 实现智能提示输入框光标位置
推荐8款非常棒的响应式 jQuery 幻灯片插件推荐

HTML5 & CSS3 应用

年度盛宴：2012年排名前20位的 CSS 网站作品
CSS3 教程：CSS3 Media Queries 实现响应式设计
Collie——基于 HTML5 的高性能 JavaScript 动画库
2012年度最佳 Web 前端开发工具和框架—《上篇》
2012年度最佳 Web 前端开发工具和框架—《下篇》
CSS3 探索发现：一组梦幻般的 CSS3 动画按钮效果
12款非常精致的免费 HTML5 & CSS3 网站模板
Web技术前沿：那些让人惊叹的 CSS3 应用演示

网页设计素材

25套五彩缤纷的矢量网页背景图片素材
56套高质量的圣诞节矢量图片素材免费下载
56套高质量的2012圣诞节矢量图素材免费下载
分享20款免费和创新的 PSD 网页设计模板
2012年最佳免费网站和移动应用 PSD 界面素材
免费素材：分享33套好看的网页按钮和图标素材
精品素材：一组免费闪亮的圣诞节透明图标素材
2012年最佳35款响应式 WordPress 主题

网页设计欣赏

流行趋势：大背景图片在网页设计中的精彩应用
激发灵感：26个清爽的蓝色调网页设计作品欣赏
经典网页设计：20个精美的国外单页网站作品
简单之美：30个极简主义风格的网站设计作品
经典网页设计：原来404错误页面可以这样设计
精美网站设计：25个全屏照片背景的网页作品
优秀网站设计：30佳别出心裁的企业网站设计
那些让人惊叹的的国外创意404错误页面设计

网页设计案例

美丽的错误：26个创意的404错误页面制作示例
经典网页设计：20个优秀的电子商务网站设计案例
经典网站设计：10个独具创意的网站头部设计示例
一组精心设计的 iPhone 和 Android 应用程序网站
经典网页设计：20例与众不同的网页联系表单设计
网页设计趋势：模糊背景在网站中的经典应用案例
优秀网页设计：20个立体动感的视差滚动效果网站
经典网页设计：30个独具匠心的单页网站设计案例

英文字体资源

字体大宝库：10款有趣的精美节日字体下载
新鲜出炉：2012年度最好看的英文字体免费下载
精品英文字体：20款免费的的圣诞节艺术字体
字体大宝库：26款新鲜出炉的高品质英文字体
字体大宝库：推荐20款好看的英文装饰字体
20佳用于手绘风格网页设计的英文字体素材

[3]jQuery+PHP获取Select option 选择的Text和Value(附选择城市实例)

来源: 互联网发布时间: 2013-11-06

PHP代码：

                 <li>
    <span class="l2">所在城市</span>
                    <select class="city">
                        <option  value="">选择所在城市</option>
                       <%foreach from=$supportcity item=city key=k%>
                        <option value="<%$k%>" <%if $nowcity==$city.city_name%>selected<%/if%> ><%$city.city_name%></option>
                        <%/foreach%>
                    </select>
                </li>
                <li>
                <span class="l2" id="area">所在地区</span>
                <%foreach from=$supportcity item=city key=k%>
                    <select class="area" citycode="<%$k%>" >
                        <option value="">选择所在地区</option>
                        <%foreach from=$city.areas item=area%>
                            <option value="<%$area.area%>"><%$area.area%></option>
                        <%/foreach%>
                    </select>
                <%/foreach%>
                </li>

Jquery代码：

        $("select.city").change(function(){
            var ccode = $(this).val();
            $("select.area").hide();
            if(ccode){
                $("select.area[citycode="+ccode+"]").show();
            }
        });
        var sltcity = $("select.city").val();
        if(sltcity){
             $("select.area[citycode="+sltcity+"]").show();
        }

下面是详细的：

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置

获取一组radio被选中项的值:var item = $('input[name=items][checked]').val();
获取select被选中项的文本:var item = $("select[@name=items] option[@selected]").text();

获取select被选中项的文本 :var item = $("select[name=items] option[selected]").text(); 或$("select[name=items]").find("option:selected").text();

select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1;

select下拉框value = 'val'的元素为当前选中项:$("select[name=items] option[value='val']").attr("selected","selected");

radio单选组的第二个元素为当前选中项 :$('input[@name=items]').get(1).checked = true; 或$('input[name=items]').attr("checked", '1′);

radio的value = 'val'的元素为当前选中项:$('input[name=items] [value='val']').attr("checked","checked");

获取值:

文本框,文本区域:$("#txt").attr("value");

多选框checkbox:$("input[name='checkbox':checked]").each(function(){

var val = $(this).val();

});

单选组radio: $("input[type=radio][checked]").val();

下拉框select的value值: $('select').val();

下拉框select选中的text 值:$("select").find("option:selected").text();

控制表单元素:

文本框,文本区域:$("#txt").attr("value","); //清空内容

$("#txt").attr("value",'11′); //填充内容

多选框checkbox:
checkbox的第二个元素被打勾:$("input[name=items]").get(1).checked = true; //打勾
$("input[name=items]").get(1).checked = false; //不打勾

checkbox的value='val'的元素前打勾:$("input[name=item][value='val']").attr("checked",true); 或$("input[name=item][value='val']").attr("checked","checked");

if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾

单选组radio: $("input[type=radio]").attr("checked",'2′);//设置value=2的项目为当前选中项

下拉框select: $("#sel").attr("value",'-sel3′);//设置value=-sel3的项目为当前选中项

$("<option value='1′>1111</option><option value='2′>2222</option>").appendTo("#sel")//添加下拉框的option

$("#sel").empty();//清空下拉框

jQuery获取Radio选择的Value值

代码

$("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值
$("#text_id").focus(function(){//code...}); //事件当对象text_id获取焦点时触发
$("#text_id").blur(function(){//code...}); //事件当对象text_id失去焦点时触发
$("#text_id").select(); //使文本框的Vlaue值成选中状态
$("input[name='radio_name'][value='要选中Radio的Value值'").
attr("checked",true); //根据Value值设置Radio为选中状态

jQuery获取CheckBox选择的Value值

$("input[name='checkbox_name'][checked]"); //选择被选中CheckBox元素的集合如果你想得到Value值你需要遍历这个集合
$($("input[name='checkbox_name'][checked]")).
each(function(){arrChk+=this.value + ',';});//遍历被选中CheckBox元素的集合得到Value值
$("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false)
$("#checkbox_id").attr("checked",true); //设置一个CheckBox的状态为选中(checked=true)
$("#checkbox_id").attr("checked",false); //设置一个CheckBox的状态为不选中(checked=false)
$("input[name='checkbox_name']").attr
("checked",$("#checkbox_id").attr("checked"));//根据3,4,5条,你可以分析分析这句代码的意思
$("#text_id").val().split(","); //将Text的Value值以','分隔返回一个数组

jquery1.3.2

ISDARK : $("input[@type=radio][name=ISDARK][checked]").val()

$("input[name=radioname][value=radio值]").attr("checked","checked");

作者：liushuwei0224 发表于2013-2-25 11:21:56 原文链接

阅读：8 评论：0 查看评论