HTML学习笔记

最新推荐文章于 2024-09-29 16:44:46 发布

初级炼丹师Yiky--1229

最新推荐文章于 2024-09-29 16:44:46 发布

阅读量109

点赞数

分类专栏： HTML 文章标签： html5 web html

本文链接：https://blog.csdn.net/weixin_44524687/article/details/116794006

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML 基础标签

文章目录

HTML 基础标签
- HTML

HTML

1.HTML概念

HTML全称为超文本标记语言。用于编写页面。

2.HTML页面默认元素

2.1 声明

2.2

2.3 {meta标签：设置HTML的常用属性。 title：浏览器显示的页面标题}

2.4 页面的主体{网页的文本，图片等信息}

3.HTML常用的标签

3.1 title

<title>测试页面</title>

3.2 meta

<meta charset="utf-8" http-equiv="refresh" content="3">
charset:设置页面的编码{ UTF-8，GBK,GB-2312}
http-equiv：Content-Type(文档类型)，refresh(网页定时刷新)，set-cookie(设置浏览器cookie缓存)
name:讲我们的信息写给搜索引擎看

3.3 标题标签

<h1></h1>...<h6></h6> 
标题标签(块级标签)：自动加粗，h1最大，h6最小
HTML中标签分为两种:块级标签和行级标签；块级标签显示为块，自动换行。行级标签则不会

3.4 段落标签

<p>123456</p>
<p>456789</p>
p(块级标签):  一般用于文字段落的展示

3.5 水平线标签

<hr/>
单标签：开始既结束。
在页面中出现有一条水平线

3.6 换行标签

<br/>  换行
&nbsp; 在html文件中表示空格

3.7 有序列表

<ol type="1" start="3" reversed="reversed">
    <li>苹果</li>
    <li>香蕉</li>
    <li>桔子</li>
    <li>桔子</li>
    <li>桔子</li>
</ol>
type:选择表示顺序的样式(可选项：1，A,a,I，i)默认为1
start：规定有序列表的起始值。
reversed：规定列表顺序为降序。

3.8无需列表

<ul type="square">
    <li>苹果</li>
    <li>香蕉</li>
    <li>桔子</li>
    <li>桔子</li>
    <li>桔子</li>
</ul>
type:选择样式；可选项circle(空心圆)  disc(实心圆)  square(实心方块)

3.9定义列表

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桔子</dd>
    <dt>蔬菜</dt>
    <dd>大土豆子</dd>
    <dd>大柿子</dd>
</dl>

3.9 分区标签

<div></div>

3.10 文本标签

<span id="s1" style="color: red;">红色字</span>
行级标签。此标签本身没有实际意义。就是用于包裹文字。一般和css样式结合使用

3.11 图片标签

<img src="../img/a.jpg" />
<img src="D:/test/a.jpg" />
src：表示图片的路径。可以使用绝对路径和相对路径
title：图片标题，当鼠标放在图片上显示的文字
alt：当图片无法显示的时候，显示的文字

3.12 文字标签

<strong>张三</strong>
<b>李四</b>
<i>王五</i>
<em>王五</em>
区别：
Strong和em都表示强调。Strong是粗体。em是斜体。Strong的强调比em高
b和i只能单纯的表示加粗和斜体
使用起来没有区别知识H5为了推广自己所谓的语义化

3.13 超链接

<a href="https://www.baidu.com" target="_top">跳转到百度</a>
href:本链接指向的地址
traget：
_blank 在新窗口中打开被链接文档。
_self  默认。在相同的框架中打开被链接文档

3.14 表格

<table border="1" width="300px" align="center">
    <tr>
        <td>姓名</td>
        <td>籍贯</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>四川</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>辽宁</td>
    </tr>
</table>
border:边框的宽度
width：表格的宽度
align：center left right  相对于外部元素的对齐方式
<table border="1" width="200px" align="center">
    <tr>
        <td>姓名</td>
        <td>科目</td>
        <td>成绩</td>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>

        <td>英语</td>
        <td>80</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>60</td>
    </tr>
    <tr>

        <td>英语</td>
        <td>100</td>
    </tr>	
</table>
rowspan：属性值为数字。 代表合并几个单元格   合并行
colspan： 合并列

3.15 form

<form>
    <input type="text" value="admin" readonly="readonly"/>
    <input type="password" />
    <input type="button" value="普通按钮" />
    <input type="radio" name="sex" value="男"/>男
    <input type="radio" name="sex" value="女" />女
    <input type="checkbox" name="hobby" value="篮球" />篮球
    <input type="checkbox" name="hobby" value="足球" />足球
    <input type="checkbox" name="hobby" value="排球" />排球
    <input type="file" />
    <input type="hidden" value="张三"/>
    <select>
    <option>辽宁省</option>
    <option>河北省</option>
    <option selected="selected">山西省</option>
    </select>
    <input type="submit" value="提交" />
</form>

代码练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" >
        <title>htmlday1</title>
    </head>
    <body>
        <strong><h1>day1 HTML</h1></strong>
        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>

        <br>
        <i>这是斜体</i><br>
        <em>这个也是斜体</em><br><br>

        <span>这是一个文字标签，下面的是一条水平线</span>
        <hr>
        <p>这是一个段落标签</p>

        <div>
            <span>这里的文字被写在分区块中</span>
            <br>
            <span>这里有个换行</span>
        </div>
        <br><br>

        <div>
            <span>有序列表</span>
            <ol type="1" reversed="reversed" start="2">
                <li>实体一</li>
                <li>实体二</li>
                <li>实体三</li>
                <li>实体四</li>
                <li>实体五</li>
            </ol>
        </div>
        <br><br>

        <div>
            <span>无序列表</span>
            <ul type="circle">
                <li>实体一</li>
                <li>实体二</li>
                <li>实体三</li>
                <li>实体四</li>
                <li>实体五</li>
            </ul>
        </div>

        <br><br>
        <div>
            <span>定义列表</span>
            <dl>
                <dt>列表一</dt>
                <dd>子项1</dd>
                <dd>子项2</dd>
                <dt>列表二</dt>
                <dd>子项1</dd>
                <dd>子项2</dd>
            </dl>
        </div>
        <br>

        <a href="https://www.baidu.com" target="_blank">点击此处跳转至百度</a>
        <table border="1" width="100px" height="50px" align="center">
            <tr>
                <td>学号</td>
                <td>姓名</td>
            </tr>
            <tr>
                <td>01</td>
                <td>张三</td>
            </tr>
            <tr>
                <td>02</td>
                <td>李四</td>
            </tr>
        </table>
        <br>
        <table border="1" width="200px" align="center">
            <tr>
                <td>姓名</td>
                <td>科目</td>
                <td>成绩</td>
            </tr>
            <tr>
                <td rowspan="2">张三</td>
                <td>语文</td>
                <td>75</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>65</td>
            </tr>
            <tr>
                <td rowspan="2">李四</td>
                <td>语文</td>
                <td>80</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>90</td>
            </tr>
        </table>
        <br>
        <strong><h3>用户注册</h3></strong>
            <form action="" >
            用户名：<input type="text" value="请输入"><br>
            密码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="pwd" ><br>
            性别：<input type="radio" name="sex" value="男">男 
            <input type="radio" name="sex" value="女">女<br>
            套餐选择：<input type="checkbox" name="meal" value="vip">vip
            <input type="checkbox" name="meal" value="svip">svip <br>
            家庭地址：<select name="province" >
                <option value="辽宁省">辽宁省</option>
                <option value="河南省">河南省</option>
            </select>
            <select name="city" >
                <option value="大连市">大连市</option>
                <option value="沈阳市">沈阳市</option>
            </select><br>
            上传照片：<input type="file" name="file"><br>
            <input type="submit" value=" 提交">&nbsp;<input type="reset" value="重置">
        </form>
    </body>
</html>