浅谈HTML标签

最新推荐文章于 2023-11-03 11:13:49 发布

榴芒姐姐

最新推荐文章于 2023-11-03 11:13:49 发布

阅读量535

点赞数

文章标签： html

本文链接：https://blog.csdn.net/alisa_Ge/article/details/108577519

版权

html入门基础（基本语法）

写在前面的一些小东西

1.基本结构：

<html>
    <head>
        <meta charset="utf-8">
        <title>第一个HTML页面</title>
    </head>
    <body>
    </body>
</html>

2.页面编码：（默认）iso-8859-1

常见的字符集（charset）:gb2312、gbk、utf-8

3.注释:

作用：

注释不需要的代码
解释代码的意思

<!--需要注释的内容 -->

4.标签两种写法：①自闭合②对标签

<tagName attr="value" attr2="value2".../>
<tagName attr="value" attr2="value2"...></tagName>

切入正题

一、常用标签分为以下几大类：行内元素、行内块元素、块元素

1.行内元素：默认按行显示，没有宽高，且不能设置宽高，实际宽高由内容决定

其有以下几个标签（常见举例）：a标签、span标签、em标签、strong标签、br标签、label标签

①a标签：

超链接

<a href="目标资源地址" target="方式">提示内容</a>

目标资源地址：URL统一资源定位符；

target一般有三个：_self：覆盖当前页面；_blank:打开新页面；_parent:覆盖父级窗口

锚链接

<a href="[page]#anchorname">提示内容</a>
<a name="anchorname">[提示内容]</a>

②span标签：

<span>内容</span>

③em标签：斜体字

<em>内容</em>

④strong标签：字体加粗

<strong>内容</strong>

⑤br标签：换行（两种写法）

<br>
<br/>

⑥label标签：为input元素定义标注(标记)。一般用在单选按钮及复选框。通俗来说，使用该标签后，你点击单选按钮或复选按钮的提示内容（文本）也是可以选中的。

<label for="设置的id名">提示内容</label>

2.行内块元素：默认按行显示，有宽高，也可以设置宽高

其有以下几个标签（常见举例）：form表单标签、input标签、select标签、textarea标签、button标签

①form表单标签：

<form method="GET/POST" action="url">
    <input type="" id="" value="" />
    <select>
        <option value="v" selected>提示内容</option>
    </select>
    <textarea rows="" cols="">提示内容</textarea>
    <button type="类型" disabled>提示内容</button>
</form>

其中：GET:显示的方式请求页面；POST：隐藏的方式请求页面；url：通俗来说指某种行为的执行人，和之前的超链接中URL一样。

②input标签：

<input type=""  id="" name="" value="" autocomplete="off/on" placeholder="提示内容" readonly />

其中：

type有以下的一些类型：

text：文本框；password：密码框；radio：单选按钮默认选中：checked；checkbox：复选框默认选中：checked；email：邮箱框；tel：电话框；number：数字框;

id：标签识别名称；唯一；前端；

name:名称；后端；

value:值；

autocomplete:当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。一般默认为on。设置成off表示禁用，表示不显示之前键入的选项；

placeholder：还没有输入字段时的提示信息，字段输入以后提示信息会自动消失；

readonly：只可读，不能往文本框中输入字段。

举例说明：

<span>账号：</span>
<input type="text" id="username" name="username" placeholder="请输入账号" autocomplete="off" value="gcy" readonly />
<br/>
<span>密码：</span>
<input type="password" id="password" name="password" placeholder="请输入密码" />
<br/>
<span>性别：</span>
<input type="radio" id="male" name="gender" value="0" />
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="0" />
<label for="female">女</label>
<br/>
<span>来源：</span>
<input type="checkbox" id="baidu" name="from" value="1" />
<label for="baidu">百度</label>
<input type="checkbox" id="2345" name="from" value="2" />
<label for="2345">2345</label>
<input type="checkbox" id="360" name="from" value="3" />
<label for="360">360</label>
<input type="checkbox" id="xinlang" name="from" value="4" />
<label for="xinlang">新浪</label>
<br/>
<span>邮箱：</span>
<input type="email" id="email" name="email" placeholder="请输入邮箱" />
<br/>
<span>手机：</span>
<input type="tel" id="tel" name="tel" placeholder="请输入联系方式" />
<br/>
<span>年龄：</span>
<input type="number" id="age" name="age" value="18" min=18 max=40 placeholder="请输入年龄"/>
<br/>

③select标签：下拉列表框

<select>
    <option value="v" selected>提示内容</option>
</select>

其中，这里的selected表示默认被选中。

举例说明：

<span>省份：</span>
<select type="province" id="province" name="province">
    <option value="0">-请选择-</option>
    <option value="1" selected>-江苏-</option>
    <option value="2">-浙江-</option>
    <option value="3">-北京-</option>
    <option value="4">-四川-</option>
</select>

④textarea标签：多行文本域

<textarea rows="" cols="">提示内容</textarea>

其中，rows表示行数；cols表示列数。

⑤button标签：

<button type="类型" disabled>提示内容</button>

其中：type有三种类型：

submit：提交按钮；reset：重置按钮；button：普通按钮

disabled：表示此按钮被禁用

写在最后，延伸一个小东西

一般在安装软件都会有这种情况：点击我同意，才能点击下一步进行后续操作。

如何实现上述操作呢？需要用到<script></script>标签。列举两种方法

第一种，需要在checkbox添加一个onclick事件触发请求，再在head中写javascript脚本

<html>
    <head>
	<title>第一个HTML页面</title>
	<script type="text/javascript" >
        //定义函数
        function disable()
          {
          //设置表单元素不能访问
          document.getElementById("submit").disabled=true
          }
        function enable()
          {
          document.getElementById("submit").disabled=false
          }
        </script>
    </head>
    <body>
        <form action="http://www.baidu.com" method="POST" target="_blank" >
        <input type="checkbox" id="agree" onclick="if (this.checked) {enable()} else {disable()}"/>
        <label for="agree" >同意</label>
        <br/>
        <button type="submit" id="submit" disabled="disabled">提交</button>
        </form>
    </body>
</html>

第二种，直接在head中写javascript脚本

<script>
    document.getElementById("agree").onchange = function(){
    document.getElementById("submit").disabled = !this.checked;
    }
</script>

3.块元素：默认独占一行，没有宽高，但可设置宽高。

列举以下几个标签（常用标签）：标题标签（h1~h6）、p段落标签、列表标签、div标签。

①列表标签分为：

无序列表
有序标签
定义列表

无序列表：

<ol type="A">
    <li>aa</li>
    <li>bb</li>
    <li>bb</li>
</ol>

展现效果：以A，B，C...形式列表

有序列表：

<ul type="square" class=youxu>
    <li>aa</li>
    <li>bb</li>
    <li>bb</li>
</ul>

展现效果以小方块形式列表，也可以以circle（空心圆）形式表示。

如果希望把小方块不显示，这里需要设置一下他的css格式。（css层叠样式表下一篇会说），这里先简单说明一下。

上图代码中，设置了一个class类名youxu。在css表里面写如下就可实现不显示小方块：

.youxu{
list-style-type:none;
}

定义列表：

<dl>
    <dt>铅笔盒</dt>
    <dd>铅笔</dd>
    <dd>橡皮</dd>
    <dd>尺子</dd>
</dl>

展现效果：

②div标签：header页头、footer页尾、nav导航栏、aside侧边栏、section主题块、artical独立块（可参考淘宝网的页面布局理解）

榴芒姐姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫