零基础玩转html

fairy.582

已于 2023-07-07 10:13:33 修改

阅读量72

点赞数 1

分类专栏：前端html 文章标签：前端 javascript 算法

于 2023-07-07 01:21:01 首次发布

本文链接：https://blog.csdn.net/weixin_70960994/article/details/131545754

版权

前端html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.HTML构成

HTML代码是有标题的。

<title>HTML基础</title>

HTML代码是由“标签”构成的。

<body>hello</body>

(1)标签名body放在<>中

(2)大部分标签成对出现，<body>为开始标签，</body>为结束标签

(3)少数标签只有开始标签，称为“单表签”

(4)开始标签和结束标签之间，写的是标签的内容。hello everyone

(5)开始标签中可能会带有“属性”，id属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

<body id="myId">hello everyone</body>

2.HTML文件基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础</title>
</head>
<body>
       你好，世界！
</body>
</html>

（1）html标签是整个html文件的根标签（最顶层标签）。

（2）head标签中写页面的属性。

（3）body标签中写的是页面上显示的内容，一般会自动填写部分内容。

（4）tiltle标签中写的是页面的标题。

注意：

2.1标签的层次结构：父子关系兄弟关系

eg:（1）head和body是html的子标签（html就是head和body的父标签）

（2）title是head的的子标签

（3）head和body之间是兄弟关系

2.2快速生成代码框架方法：在idea中创建文件xxx.html，直接输入!再回车。

3.HTML常见标签

3.1注释标签

选中需要注释的内容，利用ctrl+/快捷键进行注释和取消注释。

<!--这是注释-->

3.2标题标签：h1-h6

数字越大，则字体越小。

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

3.3段落标签：p

<p>这是一个段落</p>

3.4换行标签：br

（1）br是break的缩写，表示换行

（2）br是一个单标签，不需要结束标签

3.5格式化标签

（1）加粗：strong标签和b标签

（2）倾斜：em标签和i标签

（3）删除线：del标签和s标签

（4）下划线：ins标签和u标签

<p>这是一个段落</p>
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>

3.6图片标签：img

<img src="rose.jpg">

3.7表格标签

table标签：表示整个表格

tr:表示表格的一行

td:表示一个单元格

th:表示表头单元格，会居中加粗

thead:表格的头部区域

3.8合并单元格

跨行合并：rowspan="n"

跨列合并：colspan="n"

3.9列表标签

主要使用来布局~

（1）无序列表 ul li, 【重要】

（2）有序列表 ol li,

（3）自定义列表 dl(总标签)dt(小标题)dd(围绕标题来说明)【重要】

<h2> 无序列表 </h2>
       <ul>
           <li>王俊凯</li>
           <li>王源</li>
           <li>易烊千玺</li>
       </ul>

       <h3> 有序列表</h3>
       <ol>
           <li>王俊凯</li>
           <li>王源</li>
           <li>易烊千玺</li>
       </ol>
       <h4>自定义列表</h4>
       <dl>
           <dt>TFBOYS</dt>
           <dd>王俊凯</dd>
           <dd>王源</dd>
           <dd>易烊千玺</dd>
       </dl>

3.10表单标签

（1）表单域：包含表单元素的区域，from标签

<from action="test.htnl">
<!--    ...内容-->
</from>

（2）表单控件：输入框，提交按钮，input标签

input标签可以各种输入控件、单行文本框、按钮等

（1）type(必写)，取值种类很多，例如button、checkbox、text、file、image、password、radio等

（2）name

（3）value:input中的默认值

（4）checked:默认被选中，用于单选按钮和多选按钮

（5）maxlength:设定最大长度

       /*文本框*/
       <input type="text"> 

        /*密码框*/             
       <input type="password">    
      
       /*单选框*/
       <input type="radio" name="sex">男       
       <input type="radio" name="sex"checked="checked">女

       /*复选框*/
       <input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏    

       /*普通按钮*/
       <input type="button"value="我是个按钮">



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