Img tag - image display

Attributes	describe
scr	path
width	width
height	high
title	Description of the image (mouse hover hint)
alt	What to display when an image cannot be found
If no width and height are specified, it will be defaulted. Using the width and height attributes at the same time will distort the image, you can only specify one of them, and the other will be calculated proportionally

path

Files at the same level: pictures and html files are in the same folder

    <img src="23.jpg" width="300"  />

Subordinate: The folder where the image is stored is in the same directory as the html

<img src="image/23.jpg/" width="300"  />

Upper level: the storage image folder and the storage html folder are in the same directory

 <img src="../image/23.jpg/"width="300"  />

Absolute path (from network, specified path)

 <img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>
 <img src="F:\学习\资料\BS\学习\23.jpg">

a tag - hyperlink

Attributes	describe
href	specified direction
target	Specify the way to open the link: _top jumps out of the frame to open the webpage _parent opens the webpage in the parent window; _framename opens the webpage in the specified frame; _self is the default value to open the current page; _blank is the way to open in a new window;

external, internal link

<a href="https://weibo.com/">a标签（外链接）</a>
 <a href="常见标签标题-段落样式区分.html">a标签（内链接）</a>

Jump method

<!--规定该链接为新窗口打开-->
    <a href="https://weibo.com/" target="_blank">a标签（新窗口跳转链接）</a>
    <!--规定该链接为本窗口打开-->
    <a href="https://weibo.com/" target="_self">a标签（本窗口链接）</a>

download

  <a href="th.zip">a标签--（下载功能）</a>

anchor point

In the href, #id becomes the anchor point function, click to jump to the block corresponding to the id

 <a href="#">秦时明月之君临天下</a>
    <a href="#box1">秦时明月</a>
    <a href="#box2">父母爱情</a>
    <a href="#box3">武林外传</a>
    <div style="height:500px">
        秦时明月之君临天下<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box1">
        秦时明月<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box2">
        父母爱情<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box3">
        武林外传<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>

a tag and img code example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--规定当前所有链接都是新窗口跳转-->
    <!--<base target="_blank"/>-->
</head>
<body>
    <!--alt为名称-->
    <img src="th.jpg" alt="风景" title="夜景" height="100" />
    <a href="https://weibo.com/">a标签（外链接）</a>
    <a href="常见标签标题-段落样式区分.html">a标签（内链接）</a>
    <!--规定该链接为新窗口打开-->
    <a href="https://weibo.com/" target="_blank">a标签（新窗口跳转链接）</a>
    <!--规定该链接为本窗口打开-->
    <a href="https://weibo.com/" target="_self">a标签（本窗口链接）</a>
    <!--当href变成文件名的时候变为下载功能-->
    <a href="th.zip">a标签--（下载功能）</a>
    <!--href里面为#id变为锚点功能，点击跳转到id对应的块-->
    <a href="#">秦时明月之君临天下</a>
    <a href="#box1">秦时明月</a>
    <a href="#box2">父母爱情</a>
    <a href="#box3">武林外传</a>
    <div style="height:500px">
        秦时明月之君临天下<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box1">
        秦时明月<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box2">
        父母爱情<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box3">
        武林外传<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
</body>
</html>

legend
insert image description here

h1~h6 tags - headings

h1: first-level label
h2: second-level label
h3: third-level label
and so on

p - paragraph

 <p>这是一个段落</p>

strong - text emphasis (level 1)

 <strong>强调（页面展示为粗体）</strong>

em - text emphasis (secondary)

 <em>强调（页面展示为斜体）</em>

span - inner sub-container

 <span>区分样式</span>
  <span style="color:deepskyblue">前三个字为蓝色</span>后面字体不变

ol - ordered list

  <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>

ul - unordered list

 <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>

dl - list with titles

 <dl>
        <dt>这里是标题</dt>
        <dd>列表一</dd>
        <dd>列表二</dd>
        <dd>列表三</dd>
        <dd>列表四</dd>
    </dl>

code example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <!--规范使用标签，有助于提高seo(搜索引擎优化)-->
    <h1>标题1</h1> 
    <h2>标题1</h2>
    <h3>标题1</h3>
    <h4>标题1</h4>
    <h5>标题1</h5>
    <h6>标题1</h6>
    <p>这是一个段落</p>
    <strong>强调（页面展示为粗体）</strong>
    <em>强调（页面展示为斜体）</em>
    <span>区分样式</span>
    <span style="color:deepskyblue">前三个字为蓝色</span>后面字体不变
    <!--有序列表-->
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>
    <!--无序列表-->
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>
    <!--有标题的列表-->
    <dl>
        <dt>这里是标题</dt>
        <dd>列表一</dd>
        <dd>列表二</dd>
        <dd>列表三</dd>
        <dd>列表四</dd>
    </dl>
</body>
</html>

icon
insert image description here

selector

id selector

id selector: #+id

 <style>
        #box1, #box2 {
    
    
            width: 100px;
            height: 100px;
            color: aquamarine;
            background: red;
            margin: 10px;
        }
    </style>

class selector

[id that can be reused]
class selector: .class

 <style>
        .box {
    
    
            border: dotted 5px blue;
        }

        .box2 {
    
    
            margin: 20px;
            height: 50px;
            width: 50px;
            background: indianred;
            color: yellow;
        }
    </style>

class selector

Type selector, add styles to all p, div and other tags on the page

  <!--div p 给所有div标签下的p标签的样式-->
    <style>
        p {
    
    
            color: indigo;
            font-size: 20px;
            border: dashed green 2px;
        }

        div p {
    
    
            color:brown;
            font-size: 20px;
            border: dashed red 2px;
        }         
    </style>

wildcard

wildcard * page all use

 <style>
       * {
    
    border:1px solid red;
        }
    </style>

code example

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--id选择符-->
    <!-- #box1,#box2名字用,隔开叫做群组-->
    <style>
        #box1, #box2 {
    
    
            width: 100px;
            height: 100px;
            color: aquamarine;
            background: red;
            margin: 10px;
        }
    </style>
    <!--class选择符【可以重复使用的id】-->
    <style>
        .box {
    
    
            border: dotted 5px blue;
        }

        .box2 {
    
    
            margin: 20px;
            height: 50px;
            width: 50px;
            background: indianred;
            color: yellow;
        }
    </style>
    <!--类型选择符,给页面所有p、div等标签添加样式-->
    <!--div p 给所有div标签下的p标签的样式-->
    <style>
        p {
    
    
            color: indigo;
            font-size: 20px;
            border: dashed green 2px;
        }

        div p {
    
    
            color:brown;
            font-size: 20px;
            border: dashed red 2px;
        }         
    </style>
    <!--通配符*页面所有都使用-->
    <style>
       * {
    
    border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="box1">块</div>
    <div id="box2">块</div>
    <div class=" box box2">块</div>
    <div class="box2">块</div>
    <div class="box2">块</div>
    <p>fdbfgsnnnnn</p>
    <p>地方烦烦烦的不舒服吧</p>
    <p>八八八八发到你不是</p>
    <div>
        <p>这是div下的p标签</p>         
    </div>
     
</body>
</html>

legend

insert image description here

selector priority

The default style of the same level overrides the former by the latter
Style priority type <class<id<style(interline style)<js

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--同级样式默认后者覆盖前者-->
    <!--样式优先级 类型<class<id<style(行间样式)<js-->
    <style>
        li {
    
    
            margin: 5px; height: 40px;
            color:chocolate;
        }
        ol li {
    
    
            background: darkkhaki;
        }
        li{
    
    background:green;}
        .liclass {
    
    
            background: red;
        }
        .liclass1 {
    
    
            background: yellow;
        }
        #box {
    
    
            background: pink;
        }
        </style>
</head>
<body>
    <ol>
        <li>第一个项目</li>
        <li>第二个项目</li>
        <li>第三个项目</li>
        <li id="box" class="liclass liclass1" style="background:purple;">第四个项目</li>
        <li>第五个项目</li>
    </ol>
</body>
</html>

icon
insert image description here

a pseudo-class - mouse

Attributes	describe
link	not visited (default)
hover	mouseover (mouse over)
active	Link activated (mouse down)
visited	After the visit (after the click)

Writing according to the link visited hover active can be triggered continuously
IE6 does not support all tag classes except a

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /*
            link 未访问(默认)
            hover 鼠标悬停（鼠标划过）
            active 链接激活（鼠标按下）
            visited 访问过后（点击过后）

            按照 link visited hover active 进行编写可以持续触发

            IE6不支持a以外的所有标签类
        */
        a:link{
    
    font-size:20px;text-decoration:none;color:green;}
        a:visited {
    
    
            color: grey;
        }
        a:hover {
    
    
            color:red;text-decoration:underline;font-size:30px;
        }
        a:active {
    
    
            color:yellow;
        }
       div{
    
    height:100px;background:pink;}
        div:hover {
    
    
            background:yellow;
        }
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
    <div></div>
</body>
</html>

icon
insert image description here

Front-end basic knowledge learning - Html common tags img tag, a tag, h title, p paragraph, list, selector (2)

Article directory

Img tag - image display

path

a tag - hyperlink

external, internal link

Jump method

download

anchor point

a tag and img code example

h1~h6 tags - headings

p - paragraph

strong - text emphasis (level 1)

em - text emphasis (secondary)

span - inner sub-container

ol - ordered list

ul - unordered list

dl - list with titles

code example

selector

id selector

class selector

class selector

wildcard

code example

selector priority

a pseudo-class - mouse

Guess you like