2.HTML

基础篇 专栏收录该内容
6 篇文章 0 订阅

介绍


HTML文件是什么?

  • HTML表示超文本标记语言(Hyper Text Markup Language)。
  • HTML文件是一个包含标记的文本文件。
  • 这些标记保速浏览器怎样显示这个页面。
  • HTML文件必须有htm或者html扩展名。
  • HTML文件可以用一个简单的文本编辑器创建。
<html> #告诉浏览器这是html文档
<head>#头信息中间填标题
<title>Title of page</title>#在浏览器标签中展示title of page
</head>
<body>#会被显示在浏览器中的内容
This is my first homepage.#显示的内容内容
<b>This text is bold</b>#加粗标签
</body>
</html>
Title of page This is my first homepage. This text is bold



元素


HTML文档是由HTML元素组成的文本文件。
HTML元素是预定义的正在使用的HTML标签。

标签

  • HTML标签用来组成HTML元素。
  • HTML标签两端有两个包括字符:“<”和“>”,这两个包括字符被称为角括号。
  • HTML标签通常成对出现,比如<b>和始标签,第二个是结束标签,在开始和结束标签之间的文本是元素内容。
  • HTML标签是大小写无关的, <b>跟<B>表示的意思是一样的。

    下面是一个html元素

    <b>This text is bold</b>#此html元素以<b>开始,内容是this text is bold,以</b>结束
    

    标签属性

    • 标签可以拥有属性,属性可以为页面上的html提供附加信息。
    • 标签<body>定义了html主体,使用附加的bgcrlor属性和text,可以使浏览器的背景和文字添加颜色
    <html>
    <body bgcolor="red" text="yellow">
    This is a paragraph.
    <p>This is another paragraph</p>
    </body>
    </html>
    

    在这里插入图片描述


    引号样式
    属性值应该被包含在引号中,双引号最常用,但是单引号也可以用,在某些情况下,比如:
    name=‘Lisa “Adam” Allen’
    注:引号样式需为英文





    基本标签

    <h1>hello</h1>#h后面数字有关文本大小关系
    <h2 align="center">hello</h2>#align=""可以传入排列方式如:left(靠左)center(剧中)right(靠右)
    <p><h3>hello</h3></p>#<p></p>为双换行,开始一次,结尾一次
    hello
    <br>#换行
    <hr>#水平线
    

    hello

    hello

    hello

    hello



    格式标签

    HTML定义了很多元素用来格式化输出,比如加粗和倾斜文本。

    格式化文字

    <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><br>
    <address>BOX 666<address><br>
    <abbr title="Hypertext markup language">HTML<abbr><br><br>
    <bdo dir="rtl">I was reversed</bdo><br>
    <del>del<del><br>
    <ins>insert<ins><br>
    

    This text is bold

    This text is strong

    This text is big

    This text is emphasized

    This text is italic

    This text is small

    This text contains
    subscript

    This text contains
    superscript

    China

    HTML

    I was reversed

    del

    insert


    预格式化文本

    <pre>#将标签之间的格式按照原格式输出
    for i in range(6):
    	print(i)
    </pre>
    
    for i in range(6):
    	print(i)
    

    块引用

    <p>This is a long quotation</p>
    <blockquote>
    this is text thi is text thie is text thi is text
    this is text thi is text thie is text thi is text
    this is text thi is text thie is text thi is text
    <blockquote>
    

    在这里插入图片描述





    实体

    在HTML中,有些字符拥有特殊含义,比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话,必须在HTML代码中插入字符实体。

    一个字符实体拥有三个部分:一个and符号(&),一个实体名或者一个实体号,最后是一个分号(;)

    想要在HTML文档中显示一个小于号,我们必须这样写:<或者<

    使用名字相对于使用数字的优点是容易记忆,缺点是并非所有的浏览器都支持最新的实体名,但是几乎所有的浏览器都能很好地支持实体号。

    注意:实体名是大小写敏感;的。


    常用的字符实体

    显示描述实体名实体号
    空格&nbsp;&#160;
    <小于&lt;&#60;
    >大于&gt;&#62;
    &逻辑与&amp;&#38;
    双引号&quot;&#34;
    单引号null&#39;




    链接

    HTML使用超级链接来连接到网络上的其他页面。

    文本链接

    <a href="https://avatar.csdnimg.cn/7/9/4/1_weixin_45131319.jpg" target="_blank">My headportrait </a>#target="_blank"新窗口打开,_top跳出框架
    

    图片链接

    <a href="http://baidu.com">
    <img border="0" alt="my headportrait" align="middle" width="100" height="100" src="https://avatar.csdnimg.cn/7/9/4/1_weixin_45131319.jpg">
    </a>#border属性调节图片边框,alt属性图片加载不了时说明,
    
    my headportrait

    锚标签和name属性

    <a id="pagehome">文章目录</a>#锚点
    <a href="#pagehome">return pagehome</a>
    

    return pagehome


    邮箱链接

    <a href="mailto:csdn@163.com?&subject=This%20is%20the%20title&body=This%20is%20the%20content">Send mail !</a>
    

    Send mail !





    框架

    使用框架,可以在一个浏览器窗口中显示不止一个页面,并可以嵌套


    垂直分栏

    <frameset cols="25%,50%,25%">#定义如何将窗口拆分为框架
    	<frame src="https://baidu.com">#定义框架放入什么文件
    	<frame noresize="noresize" src="https://baidu.com">#noresize说明无法调节框架大小
    	<frame src="https://baidu.com">
    </frameset>
    

    在这里插入图片描述


    水平框架

    <frameset rows="https://baidu.com">
    	<frame src="https://baidu.com">
    	<frame src="https://baidu.com">
    	<frame src="https://baidu.com>
    </frameset>
    

    在这里插入图片描述


    noframes标签
    当某些浏览器不支持框架时,noframes标签里面的文本会被显示

    <noframes>
    Your browser does not handle frames!
    </noframes>
    
    Your browser does not handle frames!

    内联框架

    用于网页内显示网页

    <iframe src="http://baidu.com" width="200" height="200"></iframe>
    

    使用框架导航跳转指定章节

    pagehome

    <frameset cols="200,*">
    	<frame src="1.htm">
    	<frame src="2.html" name="showframe">#框架命名为showframe,使1.html能用target操作目标
    </frameset>
    

    1.html

    <a href ="2.html#s1" target ="showframe">
    

    2.html

    <h1><a name="s1"></a><<h1>
    




    表格

    使用html可以创建表格
    <table  border="1">#border可以控制边框粗细
    <caption><h3>My note</h3></caption>#表格标题
    <tr>
    	<th>number</th><th>content</th><th>content</th>#th标签用来创建表格头
    </tr>
    <tr>
    	<td>First</td><td>mull</td><td>null</td>
    </tr>
    <tr>
    	<td>Second</td><td colspan="2">null</td>#colspan合并表格
    </tr>
    </table>
    

    My note

    numbercontentcontentconten
    Firstmullnullnull
    Secondnull



    列表

    HTML支持有序、无序和自定义列表,列表之间可以嵌套

    无序列表

    <ul>
    	<li>This is number one</li></br>
    	<li>This is number two</li>
    </ul>
    
    • This is number one
    • This is number two

    有序列表

    <ol>
    	<li>This is number one</li>
    	<li>This is number two</li>
    </ol>
    
    1. This is number one
    2. This is number two

    自定义列表

    <ol type="A">
    	<li>This is number one</li>
    	<li>This is number two</li>
    </ol>
    

    在这里插入图片描述





    表单

    HTML表单用来选择不同种类的用户输入。

    输入框和按钮

    <from>
    username:
    	<input type="text" name="user"><br>
    password:
    	<input type="password" name="password"><br>
    <input type="submit" name="submit" value="submit">
    </form>
    

    在这里插入图片描述


    复选框

    <form>
    I have a bike:
    <input type="checkbox" name="Bike">
    <br>
    I have a car:
    <input type="checkbox" name="Car">
    </form>
    

    在这里插入图片描述


    单选按钮

    <form>
    male:<input type="radio" name="sex"><br>
    female:<input type="radio" name="sex">
    </from>
    

    在这里插入图片描述


    下拉框

    <select name="one">#name属性预选
    <option value="one">one
    <option value="two">two
    </select>
    

    在这里插入图片描述


    文本域

    <textarea rows="10" cols="30">
    This person was writeing blog
    </textarea>
    

    在这里插入图片描述


    从表单发送电子邮件

    <from action="mailto:csdn@163.com"  method="post" antype="text/plain">
    <h3>This form sends an e-mail to csdn<h3>
    Name:<br>
    <input type="text" name="name" value="yourname" size="20"><br>
    Mail:<br>
    <input type="text" name="mail" value="yourmail" size="20"><br>
    Comment:<br>
    <input type="text" name="comment" value="yourcoment" size ="40"><br><br>
    <input type="submit" value="Send">
    <input type="reset" value="Reset">
    </from>
    

    在这里插入图片描述


    表情包
    插入表情
    评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
    ©️2022 CSDN 皮肤主题:1024 设计师:白松林 返回首页

    打赏作者

    My笔记

    你的鼓励将是我创作的最大动力

    ¥2 ¥4 ¥6 ¥10 ¥20
    输入1-500的整数
    余额支付 (余额:-- )
    扫码支付
    扫码支付:¥2
    获取中
    扫码支付

    您的余额不足,请更换扫码支付或充值

    打赏作者

    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

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

    余额充值