HTML基础内容（极简）

最新推荐文章于 2024-07-16 12:13:25 发布

会像玫瑰和亚里士多德一样死去？

最新推荐文章于 2024-07-16 12:13:25 发布

阅读量125

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_63226521/article/details/123305618

版权

HTML

描述

用于描述页面的结构，类似人的骨架

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML通过标签来标记要显示的网页中的各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

基本结构及解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>根元素声明

<html lang="en"></html>根标签，标签内写相关代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
头部标签：定义头部信息。例如编码格式

<body>

</body>
此标签里的内容会被浏览器的显示

标签书写注意事项

不能嵌套

行级元素只能嵌套行级元素

块级元素可以嵌套任何元素

p标签里面不能套块级元素

a标签里面不能嵌套a标签

正确开始正确结束
属性写在开始标签里

常见标签

注释

<!-- 里面可以写注释 -->

标题标签

h1->h6逐渐减弱

		<h1>标题标签1</h1>
        <h2>标题标签2</h2>
        <h3>标题标签3</h3>
        <h4>标题标签4</h4>
        <h5>标题标签5</h5>
        <h6>标题标签6</h6>

段落标签

<!--段落标签 p -->
        <p>我是段落标签</p>
        <p>我是段落标签</p>

换行标签

<!-- 换行标签 br-->
        猜猜我是啥<br/>我是换行标签

分割线

  <!-- 分割线 -->
        我叫分割线
        <hr/>
        看看是不是

无序&有序列表

<!-- 无序列表 用ul定义一个无序列表 li定义具体的列表项 -->
<ul>
    <li>奶葡萄</li>
    <li>火龙果</li>
    <li>汽车模型</li>
</ul>

  <!-- 有序列表  ol li-->
        <ol start="9"><!--o指order -->
            <li>香草</li>
            <li>迷迭香</li>
        </ol>

引入图片

  <!-- 图片标签 img表示引用图片
        alt="" 如果图片找不到提示内容
        src="" 图片的源（路径）-->
eg：<img alt="海问香" src="../idea/OIP-C.jpg">    

../表示返回上级目录

路径的两种写法：

相对路径：不以/开始的都是，引用的资源相对于当前资源的位置
绝对路径：以/开始的路径是绝对路径

内联框架

<!-- 内联框架  iframe  相当于在页面上又开了一个小浏览器窗口 -->
      <iframe src="OIP-C.jpg" width="600" height="400"></iframe>

超链接

<body>
      <!-- 超链接：链接到另外一个资源a
      herf=""超链接跳转的资源路径
      相对、绝对
      target:规定在何处打开超链接
      _blank:表示在新的窗口打开
      _self:当前窗口打开
      framename ：表示在哪个frame打开
      -->
      <a href="OIP-C.jpg" target="_blank">我是超链接_blank</a>
      <a href="OIP-C.jpg" target="_self">我有是超链接</a>

      <a href="OIP-C.jpg" target="targetFrame">嘿休休，超链接frame</a>
         <iframe name="targetFrame" width="250" height="300"></iframe>
</body>

表格

<body>
      <table border="1" style=" border-collapse: collapse">
        <tr>
          <th>姓名</th><th>性别</th><th>爱好</th>
        </tr>
        <tr>
          <td colspan="2">螺狮粉</td><td>男</td>
        </tr>
        <tr>
          <td rowspan="2">香蕉</td><td>女</td><td>上树</td>
        </tr>
        <tr>
         <td>人妖</td><td>咔吧咔吧</td>
        </tr>
      </table>

</body>


<th>定义表头
colspan 占几行
rowspan 占几列
<tr>定义行
<td>定义列

在这里插入图片描述

表单

<!--表单:把数据提交给服务器
数据一般都是用户填写的

form来定义一个表单
action 代表要提交到的地方（资源路径）指定提交到的资源位置-->
<body>
        <form action="target.html" method="get">
            用户名：<input type="text" name="username" value=""/>
            密码：<input type="password" name="pwd" value=""/>
            性别：男<input type="radio" name="gender"/>女<input type="radio" name="gender"/>
            爱好：扣脚<input type="checkbox" name="aihao" value="kj">坐轮椅<input type="checkbox" name="aihao" value="zly">吃辣条<input type="checkbox" name="aihao" value="clt">
            <br/>
            最喜欢的地方：
            <select name="place">
                <option value="ltw">立陶宛</option>
                <option value="wkl">乌克兰</option>
                <option value="fg">法国</option>
            </select>
            <input type="submit" value="登录">
        </form>


</body>

表单是将用户的内容以键值对方式提交
name:定义表单项的键名
value:定义表单项的值
表单提交多个表单项，键值对以&符链接

input:定义一个文本框(type="text")
input:定义一个提交按钮(type="submit")
input:定义一个密码框(type="password")
input:定义一个单选按钮(type="radio")需要将name属性设为相同的，才可以实现单选

selcet 定义一个下拉列表，定义选项option

对于用户输入值的表单项，需要定义一个值，从而实现键值对的完整性

methed:方法-->表单提交的方式
   get:会把数据使用键值对的方式，追加到地址栏
   post:不会追加到地址栏

转义字符

字符	转义字符
空格	&nbsp ;
<	&lt ;
>	&gt ;
"	&quot ;
&	&amp ;

与分号之间没有空格

会像玫瑰和亚里士多德一样死去？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础内容（极简）

HTML用于描述页面的结构，类似人的骨架超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。HTML通过标签来标记要显示的网页中的各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）...
复制链接

扫一扫