HTML学习笔记2

最新推荐文章于 2024-09-02 21:36:01 发布

heyoumohoni

最新推荐文章于 2024-09-02 21:36:01 发布

阅读量867

点赞数 18

文章标签： html 学习笔记

本文链接：https://blog.csdn.net/heyoumohoni/article/details/140913530

版权

文本格式化标签

加粗

<b>需加粗的文字</b>、<strong>需加粗的文字</strong>

斜体

<i>要变斜体的文字</i>、<em>要变斜体的文字</em>

下划线

<u>要加下划线的文字</u>、<ins>要加下划线的文字</ins>

删除线

<s>要划删除线的文字</s>、<del>要划删除线的文字</del>

列表标签

（默认带一实心点）无序列表：<ul></ul>

（默认1234）有序列表：<ol></ol>

<li></li>表示行内容，必须放在<ul>对里面或者<ol>对里面使用

<li>可以有子标签，<ul>的子标签只能是<li>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>6666</li>
</ul>


<ol>
    <li>what</li>
    <li>are</li>
    <li>u</li>
</ol>

修改<ul>和<ol>标签的type属性的值，可以改变列表前面的符号

type属性值	ul	ol
不知道怎么搞	默认disc 实心圆	默认1 数字
	circle 空心圆	a 小写字母
	square 实心方块	A 大写字母
	无	i 小写i字母
	无	I 大写I字母

表格标签

<table></table>作为表格的根元素，行的内容、列的内容都涵括其中

<tr></tr>即table row，表示行元素

<td></td>即table data，表示列元素

<th></th>表示列标题

每一行会有多个列，所以每一对<tr></tr>中会有多个<td></td>对，第一次的<tr></tr>对中会出现多个<th></th>对

设置表格边框，在<table>开始标签里设置border属性，令border="边框宽度数字"，即可设置边框的宽度

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>just a title</title>
</head>
h1>一级标题在此</h1>
    <h2>二级标题在此</h2>
    <h3>三级标题在此</h3>
    h1到h6有六级标题    
<h6>...</h6>
<hr/>
<hr>
<hr />

<p>你是<br/>哪位</p>

<p>
    <b>heyyyy</b>
    <br>
    <strong>love uuuuuu</strong>
    <br>
    <i>NewJeans Never Die</i>
    <br>
    <em>ditto is true music</em>

    <u>supernatural</u>
    <br>
    <ins>i am not gonna be the one to get hurt</ins>
</p>
<p>
    <s>test</s>
    <del>lesson</del>
</p>


<table border="1">
    <tr>
        <th>It's</th>
        <th>true</th>
        <th>music</th>
    </tr>
    <tr>
        <td>attention</td>
        <td>hype boy</td>
        <td>hurt</td>
    </tr>
    <tr>
        <td>OMG</td>
        <td>ditto</td>
        <td>cool with you</td>
    </tr>
</table>

</body
</html>

属性

属性用于定义元素的行为和外观，以及与其他元素的关系

属性的基本语法是在开始标签中写上属性名="属性值"，即<开始标签属性名="属性值">

如上图中的border属性

每个HTML元素可以有多个不同的属性

属性名不区分大小写，属性值区分

<img src="example.jpg" alt="">
<img SRC="example.jpg" alt="">
<img src="EXAMPLE.JPG" alt="">

第一行代码和第二行代码的运行效果相同，第三个和前两个则不相同

适用于大部分HTML元素的属性

属性名	描述
class	为HTML元素定义一个或多个类名
id	定义元素唯一的id
style	规定元素的行内样式

特殊的属性

<a>标签，定义超链接，用于从一个页面跳转到另一个页面

<a>标签有两个属性，一个是href属性，用于存放目标链接，一个是target属性，定义了目标网页的打开

href属性

href属性值	外部网页链接，必须加上http://，如<a href="http://www.123.com">显示的文字内容</a>
	同一网站内网页链接，<a href="123.html">显示的文字内容</a>
	空链接，<a href="#">显示的文字内容</a>
	下载链接，点击后会进行下载，<a href="123.zip">文字</a>
	锚点链接，点击后定位到当页面的某个位置，令目标元素设定id值，<a href="#目标元素的id值"></a>
	网页元素链接，对图片、音频、表格等元素添加超链接

锚点链接代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="HTML链接知识讲解">
    <meta name="keywords" content="HTML,Link">
    <title>Document</title>
</head>
<body>
    <h1>HTML入门</h1>
    <h2>目录</h2>
    <ul>
        <li><a href="#toc1">简介</a></li>
    </ul>

  
    <h2 id="toc1">简介</h2>
    <p>
        <a href="#">回到顶部</a>
    </p>
</body>
</html>

target属性

_self	链接将会在当前窗口打开
_blank（默认）	链接将会在新窗口打开
_parent	链接将会在母窗口打开，若无母窗口则同_self
_top	链接将会在顶层窗口打开，若无顶层窗口则同_self

<img>标签，用于在网页中呈现图片

<img>的src属性，用于存放图片路径，alt属性用于存放当图片无法显示时呈现出的文字内容，width属性更改图片的宽度，height属性更改图片的高度