HTML基础冲冲冲

最新推荐文章于 2024-07-17 18:00:00 发布

招桃花都没用

最新推荐文章于 2024-07-17 18:00:00 发布

阅读量464

点赞数 4

分类专栏：笔记文章标签： html 前端 html5

本文链接：https://blog.csdn.net/weixin_45939887/article/details/122472692

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.1 HTML结构

HTML代码由“标签”构成的

<body> hello </body>

标签名（body）放到<>中
大部分标签成对出现，为开始标签为结束标签
少数标签只有开始标签，称为单标签
开始标签和结束标签中间写的时标签内容
开始标签中可能带有属性，id属性相当于给这个标签设置了唯一的标识符

<body id="MyId"> hello</body>

1.2 HTML文件基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

1.html 标签是整个 html 文件的根标签(最顶层标签)
2.head 标签中写页面的属性.
3.body 标签中写的是页面上显示的内容
4.title 标签中写的是页面的标题

1.3 HTML中标签的参差结构

在这里插入图片描述

head 和body时html的子标签（html 就是 head 和 body的父标签）
title 是 head的子标签， head是title的父标签
head和body 之间是兄弟关系

1.4 快速生成代码框架

再idea中创建文件xxx.html，直接输入==！，按tab键==，此时能制动生成代码的主体框架

2.HTML常见标签

2.1 注释标签

<!-- 我是注释 -->

ctrl+/ 这是快捷键

2.2标题标签：h1 - h6

从h1 - h6，数字越大，则字体越小

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

运行结果：
在这里插入图片描述

2.3 段落标签：p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落.
p标签标识一个段落
通过p标签改进上述代码，每个段落放到p标签中

1.p 标签之间存在一个空隙
2.当前的 p 标签描述的段落, 前面还没有缩进. (未3.来 CSS 会学)
4.自动根据浏览器宽度来决定排版.
5.html 内容首尾处的换行, 空格均无效.
6.在 html 中文字之间输入的多个空格只相当于一个空格.
7.html 中直接输入换行不会真的换行, 而是相当于一个空格.

2.4换行标签：br

br是break的缩写，表示换行

br是一个单标签
br标签不像p标签那样带有一个很大的空隙
是规范写法，不建议写成

2.5 格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

运行结果：
在这里插入图片描述

2.5 图片标签：img

img 标签必须带有 src 属性，表示图片的路径

<img src ="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.
img 标签的其他属性
1.alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
2.title: 提示文本. 鼠标放到图片上, 就会有提示.
3.width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
失衡.
4.border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"
border="5px"

在这里插入图片描述

2.6 超链接标签：a

herf：必须具备，表示点击后会跳转到那个页面
target：打开方式，默认是-self.如果是-blank则用新的标签页打开

<a href="http://www.baidu.com">百度</a>

2.6.1 外部链接

herf 引用其他网站的地址

<a href="http://www.baidu.com">百度</a>

2.6.2 内部链接

再一个目录中，先创建一个 1.html 在创建一个 2.html

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

2.6.3空链接

使用 # 在 href 中占位.

<a href="#">空链接</a>

2.6.4下载链接

href 对应的路径是一个文件. (可以使用 zip 文件)

<a href="test.zip">下载文件</a>

2.6.5网页元素链接

可以给图片等任何元素添加链接(把元素放到 a 标签中)

<a href="http://www.sogou.com">
    <img src="rose.jpg" alt="">
</a>

2.6.6锚点链接

可以快速定位到页面中的某个位置.

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
   第一集剧情 <br>
   第一集剧情 <br>
   ...
</p>
<p id="two">
   第二集剧情 <br>
   第二集剧情 <br>
 ...
</p>
<p id="three">
   第三集剧情 <br>
   第三集剧情 <br>
 ...
</p

2.7 表格标签

1.table 标签: 表示整个表格
2.tr: 表示表格的一行
3.td: 表示一个单元格
4.th: 表示表头单元格. 会居中加粗
5.thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
6.tbody: 表格得到主体区域.

<body>
    <table border="1" cellspacing="0" ></table>
    <table>
        
        <!-- tr表示一行 -->
        <tr>
            <!-- td表示一列-->
            <td>姓名</td>
            <td>班级</td>
            <td>专业</td>
        </tr>
        <tr></tr>
        <td>张三</td>
        <td>18</td>
        <td>测开 java开发</td>
         </tr>
         <tr>
        <td>李四</td>
        <td>18</td>
        <td>测开 Java开发</td>
    </tr>
    </table>
</body>

在这里插入图片描述

2.8 合并单元格

1.跨行合并 rowspan=“n”
2.跨列合并 colspan=“n”

步骤：
1.先确定跨行还是跨列
2.找好目标单元格（跨列合并，左侧是目标单元格；跨行合并，上方是目标单元格）
3.删除多余的单元格

2.9 列表标签

元素之间是并列关系
ul / uo 中只能放 li 不呢个放其他标签， dl 中只能放 dt 和dd
li中可以放其他标签
列表带有自己的样式，可以使用CSS来修改

<head>
    <body>
        <h3>无序列表</h3>
        <ul>
            <li>鸡蛋</li>
            <li>面包</li>
            <li>牛奶</li>
        </ul>

        <h3>有序列表</h3>
        <ol>
            <li>鸡蛋</li>
            <li>面包</li>
            <li>牛奶</li>
        </ol>

        <h3>随机列表</h3>
        <dl>
            <dd>鸡蛋</dd>
            <dd>面包</dd>
            <dd>牛奶</dd>
        </dl>
    </body>
</head>

运行结果
在这里插入图片描述

2.10 表单标签

表单是让用户输入信息的重要途径

表单域：包含表单元素的区域，重点是 form标签
表单控件：输入框，提交按钮等，重点是input标签

2.10.1 form标签

<form action="test.html">
   ... [form 的内容]
</form>

2.10.2 input标签

1.type(必须有), 取值种类很多,button,checkbox, text，file, image, password, radio 等.
2.name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
3.value: input 中的默认值.
4.checked: 默认被选中. (用于单选按钮和多选按钮)
5.maxlength: 设定最大长度

1) 文本框

<input type="text">

2) 密码框

<input type="password">

3) 单选框

注意: 单选框之间必须具备相同的 name 属性, 才能实现多选一效果.

性别: 
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

4) 复选框

爱好:
<input type="checkbox"> 游泳 <input type="checkbox"> 打篮球 <input type="checkbox">
踢足球

5) 普通按钮

当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究).

<input type = "button" value="我是个按钮">

6) 提交按钮

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

7) 清空按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

8）选择文件

<input type="file">

点击选择文件，或弹出对话框，选择文件

运行结果：
在这里插入图片描述

2.10.3 label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的

<label for="male">男</label> <input id="male" type="radio" name="sex">

2.10.4 select标签下拉菜单

option 中定义 selected=“selected” 表示默认选中

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

在这里插入图片描述

<select>
    <option>--请选择年份--</option>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option>1995</option>
</select>

在这里插入图片描述

2.10.5 textarea 标签

<textarea rows="3" cols="50">
    
</textarea>

在这里插入图片描述

2.10.6 无语义标签：div & span

div 标签, division 的缩写, 含义是分割
span 标签, 含义是跨度

div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span>小可爱</span>
        <span>小可爱</span>
        <span>小可爱</span>
    </div>
    <div>
        <span>小欢喜 </span>
        <span>小欢喜 </span>
        <span>小欢喜 </span>
    </div>
    <div> 
        <span>小快乐 </span>
        <span>小快乐 </span>
        <span>小快乐 </span>
    </div>
</body>
</html>

在这里插入图片描述

招桃花都没用

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
HTML基础冲冲冲

HTML基础1.1 HTML结构1.2 HTML文件基本结构1.3 HTML中标签的参差结构1.4 快速生成代码框架2.HTML常见标签2.1 注释标签2.2标题标签：h1 - h62.3 段落标签：p2.4换行标签：br2.5 格式化标签2.5 图片标签：img2.6 超链接标签：a2.6.1 外部链接2.6.2 内部链接2.6.3空链接2.6.4下载链接2.6.5网页元素链接2.6.6锚点链接2.7 表格标签2.8 合并单元格2.9 列表标签2.10 表单标签2.10.1 form标签2.10.2 i
复制链接

扫一扫