HTML 入门(new)

最新推荐文章于 2022-03-10 10:44:46 发布

stanwuc

最新推荐文章于 2022-03-10 10:44:46 发布

阅读量1.6k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/stanwuc/article/details/102702815

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

一、html概述

html标签是用来给文本添加语义的，而不是用来修饰文本的；
<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一样，才不会乱码；
<!DOCTYPE html>DTD文档申明告诉浏览器我用的什么协议来写的，不是html标签；
webstorm快捷键大全：https://www.cnblogs.com/yeminglong/p/5995421.html

二、基础标签

1、`h、p` 和 `hr` 标签

三个标签都是占一行

2、注释：``

3、图片：`<img src=" ">`

不会独占一行；
保证不变形，指定宽或者高即可；
title 和 alt 属性；
src 可以是相对路径（…/ 上一级）和绝对路径，路径中尽量不含中文，相对路径不可跨盘符，路径分隔统一写 / ，绝对路径的可移植性不好；

4、换行：` `用于内容未完的换行

5、跳转：`<a href=" "></a>`

支持文字和图片的跳转；
地址必须加 http 或者 https；
href 可以指定本地的地址；
target（_self 和 _blank）属性控制跳转是否打开新的选项卡；
title 提示作用；

6、base 标签：`<base target="_self ">`

统一指定 a 标签怎么打开，写在 head 中

7、假链接：点击不会跳转

a 标签的 href 属性值为 #或者javascript:;
#会跳转到页面的顶部，而 js 不会

8、锚点：`<a href="#id值"><\a>`

可以跳转到当前页面的指定位置
可以跳转到其他页面的指定位置，只需在 # 前面加上页面的路径即可
跳转无过度动画

9、文本格式化标签总结（不建议使用）

<!-- 文本加粗效果 -->
<b>This text is bold</b><br />
<strong>This text is strong</strong><br />

<!-- 文本字体加大效果 -->
<big>This text is big</big><br />

<!-- 斜体字效果 -->
<em>This text is emphasized</em><br />
<i>This text is italic</i><br />

<!-- 文本字体变小的效果 -->
<small>This text is small</small><br />

<!-- 文本上标和下标效果 -->
This text contains
<sub>subscript</sub><br />
This text contains
<sup>superscript</sup>

<!--删除线和下划线-->
<p>一打有 <del>二十</del> <ins>十二</ins> 件</p>

10、关于 DIV 和 SPAN

div 和 span 属于无语义的标签，大部分的 html 标签都是具有一定的语义的；
div 是块级元素，独占一行，而 span 是行内元素，不会独占一行的空间；
span 是行内元素，必须设置为行内块级或者块级元素才能设置宽高；
div 和 span 的作用是和 css 搭配进行页面的布局，也就是作为容器使用；
html 逐渐推出了一些含语义的标签来进行页面元素的组织（header、footer、article），虽然不是用来替代 div 的，但是也可以减少 div 的使用；

三、列表标签

1、无序列表（ul）

<ul><li><\li><\ul>；
ul 除了 li 不建议再加其他的标签，li 标签中可以放其他标签来丰富内容；
li 中还可嵌套列表；
ws快捷生成 ul>li*3>h2+p；

2、有序列表（ol）

<ol><li><\li><\ol>；

3、定义列表（definition list）

dt 是标题，dd 是具体的描述；dl 中不建议加其他标签，二 dt 和 dd 可以加；
应用：网站尾部，图文混排（仿京东做个网站的尾部）；

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置</dd>
</dl>

四、表格标签

1、表格格式

需要说明的是 thead、tfoot 和 tbody 不是必须要写的，tbody即使不写，浏览器也会自动生成，其他两个不会
tbody 的自动生成是我们写 css 的选择器的时候必须要考虑的，不然很有可能无法获取到我们想要的表格元素

<table border="1">
  <caption>这是我的表</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

2、表格属性

宽高属性

table 和 td 可用；
默认高宽根据内容调整；
td 设置高宽只会改变当前单元格的状态，而不会改变 table 的高宽；

水平和垂直对齐（align 和 valign）

水平对齐三个都可以用，而垂直对齐针对 tr 和 td；
table 设置 align 控制表格在水平方向的对齐，给 tr 和 td 设置都是控制单元格里的内容的对齐方式，不过 tr 影响一行，td 影响一个，tr 和 td 都设置 td 会覆盖 tr 的效果；
tr 和 td 设置 valign 都是控制单元格内容的垂直方向的对齐，不过 tr 影响一行，td 影响一个，tr 和 td 都设置 td 会覆盖 tr 的效果；

内边距和外边距（cellpadding 和 cellspacing）

两个属性都是 table 的；
外边距cellspacing是指格子与格子之间的空隙，而内边距cellpadding 是指格子与文字之间的间隙；

细线表格

先给 table 设置 bgcolor 为black；再给 td 设置 bgcolor 为 white

table 设置高度后，tfoot 和 thead 的高度是不会变化的；

3、单元格合并（rowspan | colspan）

在这里插入图片描述

<table>
    <tr>
        <th>Column 1 heading</th>
        <th>Column 2 heading</th>
        <th>Column 3 heading</th>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>
    </tr>
    <tr>
        <td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
    </tr>
</table>

五、表单标签

1、格式

<form action="#" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

表单添加边框可以在 form 中添加 fieldset 来实现，fieldset还可以对表单字段进行分组

<form>
  <fieldset style="width:fit-content;">
    <legend>健康信息</legend>
    身高：<input type="text" /><br/>
    体重：<input type="text" />
  </fieldset>
</form>

在这里插入图片描述

2、九种 input 标签

text：普通文本
password：密文
radio：互斥要设置 name 相同；默认选中 checked；单选
checkbox：选中 checked；多选
button：普通按钮
image：图片按钮
reset：value 修改标题；表单数据重置
submit：form 的 action 确定提交的地址；提交数据加 name 属性；提交表单数据；
hidden：隐藏域；通常用来传递参数，但又不想让用户见到；

补充说明

label 标签：让文字与 input 标签绑定；两种绑定的方式：
datalist 标签：给输入框绑定输入的提示：<datalist><option>haha</option></datalist>

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

h5 中新增的 input 标签：email 、url 、number 、color、date（浏览器的支持不好）

3、非 input 标签

select

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

textarea

cols 和 rows 指定输入的行列，但是还是可以无限输入；
通过 maxlength 属性可以指定最多输入的字数；
默认可拉伸，css 设置 resize 属性为 none 可以禁止拉伸；
开始结束标签之间的内容是文本框的初始值；

六、多媒体标签

1、video 标签

格式：<video src=" " autoplay="autoplay"></video>；
属性：controls（控制条）poster（海报）loop（循环）preload（预加载，与autoplay冲突）muted（静音）width/height；
另一种 video 格式：解决浏览器的兼容

<video>
    <source src="">
    <source src="">
</video>

让所有的浏览器支持 video 标签：通过 js 框架来实现

2、audio 标签

使用基本和 video 一样，属性只有宽高和 poster 不能用，也是两种格式

3、details 和 summary 标签

格式

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

效果

4、marquee标签

w3c 不推荐，但是浏览器的支持好，可以实现跑马灯效果
属性：direction（方向）scrollamount（滚动的速度）loop（滚动次数，默认-1）behavior（滚动类型 slide）

<marquee>This text will scroll from right to left</marquee>
<marquee direction="up">This text will scroll from bottom to top</marquee>
<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
    <marquee behavior="alternate">
        This text will bounce
    </marquee>
</marquee>

废弃的标签（无语义）： <hr>加粗下划线斜体<s>删除线
替代的标签（加入了语义）：<ins><del>

5、字符实体

&nbsp；空格-----&lt；&gt；小于和大于-----&copy；版权符号
理解：html 占用了的不显示的特殊字符用另外的代替符号表示，使他们正常在 html 页面上显示

七、其他标签

1、meta 标签

<meta>元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词；
<meta> 标签位于文档的头部，不包含任何内容，标签的属性定义了与文档相关联的名称/值对；

<meta name="keywords" content="HTML,ASP,PHP,SQL">
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

2、article、section(区域)、aside(附属信息)等标签

这些标签都没有特殊的样式，只是用于给页面布局（划分区域），与div相比具有一定语义

<article>
    <header>
        <h1>Alternatively&hellip;</h1>
        <p>[An introduction]</p>
    </header>
    <section id="main_content">
        <p>[Content]</p>
    </section>
    <footer>
        <p>[End notes]</p>
    </footer>
</article>
<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/techniques/">Techniques</a></li>
        <li><a href="/examples/">Examples</a></li>
        <li><a href="/references/">References</a></li>
    </ul>
</nav>
<aside>
    <h2>Tixall Obelisk</h2>
    <p>[A short note about Tixall Obelisk]</p>
</aside>
<footer>
    <p>[Copyright bumf]</p>
</footer>

3、figure 标签

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）；
figure 元素的内容应该与主内容相关，但删除不应对文档流产生影响；

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

4、input 补充

month 等关于时间的 input 都具有特殊的样式，可以下拉选择时间；color 可以选择颜色；
placeholder 可以在输入框指定占位的值，autofocus可以实现页面加载后输入框自动聚焦；

<input type="date"><br>
<input type="month"><br>
<input type="week"><br>
<input type="time"><br>
<input type="datetime-local"><br>
<input type="color">
<input type='text' placeholder='haha' autofocus/>

stanwuc

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML 入门(new)

一、html概述html标签是用来给文本添加语义的，而不是用来修饰文本的；<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一样，才不会乱码；<!DOCTYPE html>DTD文档申明告诉浏览器我用的什么协议来写的，不是html标签；webstorm快捷键大全：https://www.cnblogs.com/y...
复制链接

扫一扫