HTML标记

目录

1. 标题标记

2. 超链接标记

3. 路径

4. 图片

5. 表格

table标签属性

table通用属性

tr属性

td属性

table其他属性

6. 列表标记

7. 其他标记

8. 表单标记

组成

表单域

表单控件(表单元素)

input输入表单元素

select表单元素

textarea表单元素


1.标题标记

<h1></h1>~<h6></h6>

独占一行,加粗显示,级别越高字体越小

2. 超链接标记

<a></a>

<a href="#" target="_blank">百度</a> 
<a href="#" target="_self">百度</a> 

多个占一行,自带样式:下划线、字体颜色为蓝色 

href 值为跳转的链接 

target="_blank":在新标签页打开标签链接

target="_self":在当前标签页打开标签链接

1. a 标签有默认的颜色:蓝色
2. 它不会继承父辈元素的字体颜色,可以理解为继承颜色的优先级小于默认颜色,但可以单独设置同样要注意权重问题
3. 在写导航时常用a标签,如果我们已经将a标签字体颜色设置为某色,那么再写.nav li:hover{color:"#0f0"}此时a可以继承#0f0,如果a的颜色未设置则仍无法继承

3. 路径

绝对路径:

浙江省杭州市 xx小区 x单元 101

D://mygoods/code/index.html

相对路径:

相对于某一个文件(夹)的位置

./       同一级目录

../      跳转到上一级目录       

4. 图片

<img src="./img/img01.jpg" width="100px" title="我是图片"  alt="图片无法加载时显示" border="10px" />

img标签属性:

src 路径

width 图片宽度

height 图片高度

title 图片描述信息 鼠标停留在图片上会显示

alt 图片路径错误或者无法加载时的描述信息

border 边框

5. 表格

<table border="1px" width="500px" cellspacing="0" cellpadding="10px" align="center">
    <tr height="60px" align="center">
        <td width="100px">11</td>
        <td valign="bottom">11</td>
        <td>11</td>
    </tr>
    <tr>
        <td>11</td>
        <td>11</td>
        <td>11</td>
    </tr>
</table>

table标签属性

border------边框

width--------表格宽度

cellspacing------单元格之间的距离(外间距)

cellpadding------内容和单元格之间的距离(内间距)

align="left/right/center"-----------表格在页面的居中方式

table通用属性

<table>,<tr>,<td>都识别的属性】

  1. 对齐方式align="left/center/right"
  2. 宽度width,设置表格的宽度,取值可以为固定像素值(像素px省略不写),也可以是百分比
  3. 高度height,设置表格高度,取值可以为固定像素值(像素px省略不写),也可以是百分比

tr属性

  1. valign---单元格中内容的垂直排列方式,下图中第一行设置了valign="bottom"对齐方式

td属性

  1. 垂直对齐valign---单元格中内容的垂直排列方式
  2. 单元格合并

同一行的单元格合并,就是列合并colspan=""

同一列的单元格合并,就是行合并rowspan=""

几个单元格合并成一个,colspan和rowspan的值就是几

跨列合并(colspan写左边单元格)

<!-- 第一行 -->
        <tr>
            <td colspan="2">单元格1</td>
            <!-- <td>单元格2</td> -->
            <td>单元格</td>
            <td>单元格4</td>
        </tr>

 跨行合并(rowspan写上面单元格)

<!-- 第一行 -->
        <tr>
            <td colspan="2">单元格1</td>
            <!-- <td>单元格2</td> -->
            <td>单元格</td>
            <td rowspan="2">单元格4</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <!-- <td>单元格8</td> -->
        </tr>

【注意】我们合并的时候,需要删除相应的td列,如果删除不正确,会出现不必要的错误。 

table其他属性

caption

caption 属性返回了表格的 caption 元素。

caption 元素定义了表格的标题。

注意: <caption> 元素定义了一个表格标题。<caption> 标签必须紧跟在 <table> 标签之后,每个表格仅能规定一个 caption。通常,caption 会位于表格之上居中的位置。

表格结构标签(添加这三个标签时,要注意不能影响网页布局):
    <thead></thead>     表头部(放表格的标题之类)
    <tbody></tbody>     表主体(放表格主体数据)
    <tfoot></tfoot>         表脚注(放表格脚注)

在写代码时:不论上面<thead>,<tfoot>,<tbody>顺序如何,在页面显示时,总是按照:<thead>  <tbody>  <tfoot>的顺序呈现出来的。

6. 列表标记

  • 无序列表
  • 有序列表
  • 自定义列表

无序列表

<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义。

无序列表基本语法格式

ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
</ul>

有序列表

<ol>标签用于定义有序列表,列表排序以数字来显示,并使用<li>标签来定义列表项。有序列表基本语法格式:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
</ol>
  • <ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或文字的做法是不被允许的。

  • <li></li>之间相当于一个容器,可以容纳所有元素。

  • 有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置。

自定义列表

标签用于定义描述列表(或定义列表), 该标签会与(定义项目/名字)和

(描述每一个项目/名字)一起使用。

注:

dl 是definition lists的英文缩写 (自定义列表)

dt 是definition term的缩写 (自定义列表组)

dd 是 definition description 的缩写(自定义列表描述)

基本语法:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
</dl>
  • <dl></dl>里面只能包含<dt><dd>

  • <dt><dd>个数没有限制,经常是一个<dt>对应多个<dd>

列表总结

标签名

定义

说明

<ul></ul>

无序列表

里面只能包含li,没有顺序,使用较多。li里面可以包含任何标签

<ol></ol>

有序列表

里面只能包含li,有顺序,使用相对较少。li里面可以包含任何标签

<dl></dl>

自定义列表

里面只能包含dt和dd。dt和dd里面可以包含任何标签

7. 其他标记

<br>   换行

<hr>   水平线

&circ;     ^

<b>加粗</b>       

<u>下划线</u>

<i>倾斜</i>

8. 表单标记

表单 允许我们发送和接收来自web网页的数据

form表单  所有表单元素(输入框和按钮)需要位于表单标记内

属性: name 标识表单的唯一名称

            action 提交时处理表单数据的地址url

            method 传送数据的请求方式     get/post

组成

表单域、表单控件(也称表单元素)和提示信息

表单域

表单域是一个包含表单元素的区域

在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递

<form>会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>

属性

属性值

作用

action

url地址

用于指定接收并处理表单数据的服务器程序的url地址

method

get/post

用于设置表单数据的提交方式,其取值为get或post

name

名称

用于指定表单的名称,以区分同一个页面中的多个表单域

【*****】get 和 post 区别:

get:浏览器地址栏可以看到,不安全,传输数据量小

post:数据通过http协议传输,安全,传输数据量大

表单控件(表单元素)

在表单元素中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。

  •     input输入表单元素
  •     select下拉表单元素
  •     textarea文本域元素

input输入表单元素

<input>标签用于收集用户信息

<input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)

<input type="属性值"/>
  • <input/>标签为单标签
  • ·type属性设置不同的属性值用来指定不同的控件类型

 除type属性外,<input>标签还有其他很多属性,如下 

属性

属性值

描述

name

由用户自定义

定义input元素的名称

value

由用户自定义

规定input元素的值

checked

checked

规定此input元素首次加载时应当被选中

maxlength

正整数

规定输入字段中的字符的最大长度

  • name和value是每个表单元素都有的属性值,主要给后台人员使用

  • name表单元素的名字,要求单选按钮和复选框要有相同的name值

  • checked属性主要针对于单选按钮和复选框,主要作用——打开页面就要可以默认选中某个表单元素

  • maxlength是用户可以在表单元素输入的最大字符数,一般较少使用

问题:

  • 有些表单元素想刚打开页面就默认显示几个文字怎么做?
用户名:<input type="text" value="请输入用户名"/>
  •  页面中的表单元素很多,如何区别不同的表单元素?

答:name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单,页面中的表单很多,name的主要作用就是用于区别不同的表单。

用户名:<input type="text" value="请输入用户名" name="username"/>

name属性后面的值,是自定义的

radio(或者checkbox)如果是一组,我们必须给他们命名相同的名字

<input type="radio" name="sex"/>男

<input type="radio" name="sex"/>女

【注意】

<input type="text">在点击输入框时会有一个默认的加粗黑色边框,用outline-style:none即可去除

 label标签

label标签为 input 元素定义标注(标签)

<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

 核心:<label>标签的for属性应当与相关元素的id属性相同

select表单元素

使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表

语法:

```
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>
```
  • <select>中至少包含一对<option>

  • <option>中定义selected="selected"时,当前项即为默认选中项

textarea表单元素

使用场景:当用户输入内容较多时,我们就不能使用文本框表单了,此时我们可使用标签

在表单元素中,标签是用于定义多行文本输入的控件。

使用多行文本输入控件时,可以输入更多的文字,该控件常见于留言板,评论。

语法:

<textarea rows=""3 cols="20">
  文本内容
<textarea>
  • 通过标签可以轻松创建多行文本输入框

  • cols="每行中的字符数",rows="显示的行数",我们在实际开发中不会使用,都是用CSS来改变大小。

表单元素总结

  • 表单元素我们学习了三大组: 

        input输入表单元素

        select下拉表单元素

        textarea文本域表单元素

  • 这三组表单元素都应该包含在form表单域里面,并且有name属性。

<form>
    <input type="text" name="username">
    <select name="jiguan">
    <option>北京</option>
    </select>
    <textarea name="message"></textarea>
</form>
  •  有三个名字非常相似的标签:

(1)表单域 form 使用场景:提交区域内表单元素给后台服务器

(2)文件域 file 使用场景:上传文件

(3)文本域 textarea 使用场景:可以输入多行文字,比如留言板、网站介绍等

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值