HTML知识

最新推荐文章于 2023-12-06 17:48:03 发布

Miracle5220

最新推荐文章于 2023-12-06 17:48:03 发布

阅读量342

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/miracle5220/article/details/109567469

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML5学习

学习路径：
HTML 20%
CSS3 50%
H5C3 10%包括新增的标签

软件：VSCode
安装插件：Chinese(Simplified) language
open in browser
Auto Rename Tag

ctrl+n新建
ctrl+s保存
shift+alt+f 自动格式
ctrl+/ 注释或取消注释(单行)
alt+shift+A块注释

各种网页编程语言的功能

结构网页元素整理分类HTML
表现版式，颜色大小CSS
行为网页交互的编写后端 JS
<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

标题标签<h1>-<h6>一级标题到6级标题 =md中的#
段落标签和换行标签<p></p>段落标签
换行标签单标签 <br />强制换行(也可以这么写<br>)

加粗： <strong>加粗标签</strong> ， <b>加粗标签2</b>,优先考虑strong
斜体： <em>倾斜标签</em> ，<i>倾斜标签2</i>,优先考虑em
删除线： <del>删除标签</del> ，<s>删除标签2</s>,优先del标签
下划线： <ins>下划线标签</ins>， <u>下划线标签2</u>,优先使用ins

特殊的标签 div 和 span

div 用来布局的但是他是单独占一整行
span 在一行上显示多个span

图片标签

图像标签<img src="1.jpg" />　单标签　同一目录下
图像标签的参数 (参数之间用空格分开)
alt 如果图片不能显示用来替换的文字
height 图片高度
width 图片宽度
title 鼠标放到图片
例：<img src="images/光点.jpg" alt="图片无法显示" title="我是光点" width="200" height="200" border="1" />

路径使用的是/ 绝对路径使用的是\

超链接标签 a

超链接语法格式

<a href=""  target=""></a>

href 用于链接目标的地址(必须)
targrt 链接页面的打开方式 _self为默认值在当前页打开 _blank为在新窗口打开
外部链接 两个标签中间作为超链接开关
内部链接 href直接写文件名称就可以(盲猜也是使用相对路径)
空链接 href可以用空链接用#代替
下载链接 如果href里是一个zip或文件则默认下载
各种元素都可以做为超链接
锚点链接 跳到本页中的某处的链接
href属性里为’#名字’的形式<a href="#two">
然后在目标标签里<h3 id="two">

注释标签 <!–这就是注释–>，快捷键ctrl+/
大于号 >小于号 <空格  
在这里插入图片描述

表格标签

表格：显示展示数据
基本语法：

<table>
    <tr>
        <td>单元格中的文字</td>
      </tr>
  </table>

<table></table>定义表格的标签
<tr></tr>定义表格中的行
<td></td>单元格，标签之间添加内容表头单元格标签
语法：<th></th>
表格会加粗，内容会居中显示
表格属性要写到table里

 <table align="center" border="1">
        <tr></tr>
    </table>

在这里插入图片描述
thead表示表头区域 tbody表示主体部分，使用方法，用thead把头部区域包起来

 <table>
      <thead>表格头部区域</thead>
      <tbody>表格主体部分</tbody>
  </table>

合并单元格
跨行合并：最上侧单元格为目标单元格，写合并代码，rowspan=“要合并的单元格的个数”
跨列合并：最左侧单元格为目标单元格，写合并代码，colspan=“要合并的单元格的个数”
合并单元格三部曲
1.先确定是跨行合并还是跨列合并
2.找到目标单元格，写上合并方式=“合并单元格的数量”,例<td colspan= "2"></td>
3.删除多余的单元格
在这里插入图片描述

列表是用来布局页面的
分类：
无序列表
有序列表
自定义列表

无序列表

 <ul>
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>

<ul>里只能放<li>标签，不允许放其他文字或标签，但<li>里可以放任何标签
有序列表

  <ol>
      <li>列表项1</li>
      <li>列表项2</li>
    </ol>

注意事项和无序列表一致，<ol>里只允许<li>标签
自定义标签
说明，围绕着表头来解释说明

 <dl>
      <dt>名词1</dt>
      <dd>名词1解释1</dd>
      <dd>名词1解释2</dd>
    </dl>

注意事项：
dl里只能有<dt>和<dd>
一个自定义列表里可以有多个<dt>
在这里插入图片描述

表单标签

注册页面就是个表单
表单，收集用户信息
组成：
表单域,表单控件(也叫表单元素),提示信息
表单域
<from>会把它范围内的元素提交给服务器
实例代码：

  <form action="url地址" method="提交方式" name="表单域名称">
    </form>

在这里插入图片描述

表单元素

元素种类
input输入表单元素
select下拉表单元素
textarea文本域元素
input输入元素
语法规范:

  <input type="属性值" />

<input type="属性值"/>标签为单标签
type属性设置不同值来指定不同控件类型
type属性值表:
在这里插入图片描述
input的其他属性
name属性：单选按钮和复选按钮必须在同一name下
value属性:在输入框内的默认文字,往后台发送的值,可以更改按钮里的文字
checked属性:针对单选按钮和复选按钮,当页面打开的时候，默认选中这个按钮,checked=“checked”
maxlength属性:用户最大填入字符的长度,maxlength=“长度”
<label>标签:扩大表单元素的点击面积,双标签,特征值(id)必须和for相同
在这里插入图片描述

代码练习

<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>练习</title>
</head>

<body>
    <a id="top"></a>
    <h1> 标题啊啊啊</h1>
    <h4>小标题</h4>
    <div>我是一个大盒子，自己占一行 </div>
    <span>我是个小盒子</span><br />
    <h4>路径插图</h4>
    <img src="images/光点.jpg" alt="图片无法显示" title="我是光点" width="100" height="100" border="1" />
    <img src="龟.jpg" width="100" />
    <img src="../手链.jpg" width="100" /><br />
    <h4>几种超链接</h4>
    <a href="http://www.qq.com" target="_blank">外部</a>
    <a href="1.html">内部</a>
    <a href="#">空</a>
    <a href="龟.zip">下载压缩包</a>
    <a href="http://www.baidu.com"><img src="龟.jpg " width="50" /></a><br />
    <p>
        <strong>加粗</strong><b>加粗2</b><em>倾斜</em><i>倾斜2</i><del>删除标签</del><s>删除标签2</s><ins>下划线</ins><u>下划线2</u><br />空&nbsp;&nbsp;&nbsp;&nbsp;格&nbsp;大于号&gt;小于号&lt;
    </p>
    <h4>表格设置</h4>
    <table algin="center" border="1" cellpadding="20" cellspacing="1" width="400">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>相关链接</th>
                <th>图片</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>周杰伦</td>
                <td>男</td>
                <td rowspan="2">40</td>
                <td colspan="2"><a href="images/周杰伦.jpg">图</a></td>
            </tr>
            <tr>
                <td>刘德华</td>
                <td>男</td>
                <td><a href="images/刘德华.jpg">图</a></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <h4>无序列表</h4>
    <ul>
        <li>夜曲</li>
        <li>晴天</li>
        <li>安静</li>
    </ul>
    <h4>有序列表（排行榜）</h4>
    <ol>
        <li>夜曲200</li>
        <li>安静50</li>
        <li>晴天20</li>
    </ol>
    <h4>自定义列表</h4>
    <dl>
        <dt>关注周杰伦
        <dd>新浪微博</dd>
        <dd>ins</dd>
        </dt>
    </dl>
    <h4>表单</h4>
    <form action="demo.php" method="post" name="nane1"></form>
    <form>
        用户名：<input type="text" name="username" value="输入用户名" maxlength="5" /><br />
        密码：<input type="password" name="pwd" /><br />
        <!--label扩大范围，点到男就可选中-->
        性别：<input type="radio" id="nan" name="sex" checked="checked" /><label for="nan">男</label>
        <input type="radio" id="nv" name="sex" /><label for="nv">女</label><br />
        爱好：<input type="checkbox" name="hobby" />吃饭
        <input type="checkbox" name="hobby" checked="checked" />睡觉
        <input type="checkbox" name="hobby" />打豆豆<br />
        籍贯：<select>
            <option>河南</option>
            <option>山东</option>
            <option selected="selected">北京</option>
        </select><br />
        <input type="submit" value="免费注册" />
        <input type="reset" value="重新填写" />
        <input type="button" value="获取短信验证码" />
        <input type="file" /><br />
        个人简介：<textarea cols="10" rows="5">请输入个人简介</textarea>
    </form>


    <h3>目录</h3>
    1.百度百科<br />
    2.早年经历<br />
    3.演艺经历<br />
    4.<a href="#gqsh">感情生活</a><br />
    <h5>百度百科</h5>
    周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、原创音乐人、演员、导演等，毕业于淡江中学。

    <h5>早年经历</h5>
    周杰伦出生于台湾省新北市，祖籍福建省泉州市永春县[23]。周杰伦4岁的时候，母亲叶惠美把他送到淡江山叶幼儿音乐班学习钢琴[24]。周杰伦读初中二年级时，他的父母因性格不合离婚，而周杰伦则归母亲叶惠美抚养。中考时，周杰伦没有考上普通高中；同年，他因为擅长钢琴而被淡江中学第一届音乐班录取。高中毕业以后，他两次报考台北大学音乐系均没有被录取，于是他开始在一家餐馆打工[24]。


    <h5>演艺经历</h5>
    2000年，在杨峻荣的推荐下，周杰伦开始演唱自己创作的歌曲；11月7日，发行首张个人专辑《Jay》，并包办全部歌曲的作曲、和声编写以及监制工作[27]；该专辑融合了R&B、嘻哈等多种音乐风格[28]，其中主打歌曲《星晴》获得第24届十大中文金曲优秀国语歌曲金奖[29]，而周杰伦也凭借该专辑在华语乐坛受到关注，并于次年获得第12届台湾金曲奖最佳流行音乐演唱专辑奖、第12届台湾金曲奖最佳制作人提名、第12届台湾金曲奖最佳作曲人提名[30][31]。

    <h5 id="gqsh">感情生活</h5>
    2014年11月17日，周杰伦正式公开了与昆凌的恋情[171]。2015年1月17日，周杰伦与昆凌在英国举行婚礼[172][173]；2月9日，周杰伦与昆凌在台北举行泳池户外婚宴[174]；3月9日，周杰伦、昆凌在澳洲举办家庭婚礼[175][176]；7月12日，周杰伦与昆凌的女儿出生[177]。2017年2月13日，周杰伦宣布妻子怀二胎[178]；6月8日，周杰伦与昆凌的儿子出生[179]。
    <br />
    <a href="#top">返回顶部</a>
    <br />
    作者;佳佳<br />
    2020
    </p>
</body>

</html>

Miracle5220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML知识

HTML5学习学习路径：HTML 20%CSS3 50%H5C3 10%包括新增的标签软件：VSCode安装插件：Chinese(Simplified) languageopen in browserAuto Rename Tagctrl+n新建ctrl+s保存shift+alt+f 自动格式ctrl+/ 注释或取消注释(单行)alt+shift+A块注释各种网页编程语言的功能结构网页元素整理分类HTML表现版式，颜色大小CSS行为网页交互的编写后端 JS
复制链接

扫一扫