HTML基础系列

港控/mmm° 2021-09-18 23:16 311阅读 0赞

![HTML基础系列][HTML]

![image.png][]

HTML标记语言，网页制作的第一步。  
什么是HTML呢？查百度  
基础语法  
常用标签

HTML是超文本标记语言，HTML不用编译，直接在浏览器中执行，HTML是一个文本文件。

HTML基本结构，标签，元素，属性，注解

标签属性格式：

<标签名 属性名=“属性值”></标签名>

文档类型声明：

<!DOCTYPE> 声明必须放在html文档第一行，不是html标签

编码文件

标题标签，段落标签，预格式化标签，水平线

无序列表：

<ul>
     <li></li>
    </ul>
    
    disc 圆点
    square 正方形
    circle 空心圆

有序列表:

结构，表现，行为

图片标签

相对路径，绝对路径

超链接标签：

<a href=""> 内容 </a>
    href target title name
    _self _blank _top _parent

定义锚：

邮件链接：

下载：

表格的基本结构，操作表格，属性，跨行，嵌套

添加标题

加载过长，内容过多

表格分：表头，主体，脚注

thead tbody tfoot
    
    <table>
     <caption><caption>
     <thead>
     <tr>
      <th></th>
     </tr>
     </thead>
     <tbody>
     <tr>
     <td></td>
     </tr>
     </tbody>
     <tfoot>
     </tfoot>
    </table>

表格属性

width表格宽度，align对齐方式，border表格边框的宽度，Bgcolor表格背景颜色，cellpadding内容之间的空白，cellspacing单元格之间的空白，frame和rules。

跨列属性: colspan  
跨行属性: rowspan

表格嵌套：

表单结构，表单常用元素，表单交互属性

语法：文本域，单选框，复选框，按钮，列表

<form>
    ...
    </form>
    
    input
    select
    option
    textarea
    optgroup
    
    <input type="" name=""/>
    text password file checkbox radio button submit reset hidden image
    
    name maxlength size value placeholder

<input type="image" name="" src="imageurl" />
    
    <input type="hidden" name="" value="" />
    传输给服务器

下拉菜单和列表标签

<select>
     <option value=""></option>
     <option value=""></option>
    </select>
    
    name multiple可以多选 size显示条目
    
    <option>标签属性
    selected value

分组下拉菜单

多行文本域

<textarea name="" rows="" cols="">
    </textarea>
    
    name placeholder rows cols

<form action="" method="" name="" >
    </form>
    
    action method name target enctype

网页结构：

总结：

html表单，表单应用场景，表单工作原理

<input type="" name="" />
    text password file checkbox radio button submit reset hidden image
    <form>
    <input type="text" name=""/>
    </form>
    
    name, maxlength, size, value, placeholder
    <form>
    <input type="password" name=""/>
    </form>
    
    <form>
    <input type="file" name=""/>
    </form>
    
    <form>
    <input type="radio" name="" value="" checked/>
    </form>
    
    <form>
    <input type="checkbox" name="" value="" checked/>
    </form>
    
    <input type="button" name="" value=""/>
    type="submit"
    type="reset"
    <input type="image" name="" src="imageurl"/>
    
    <input type="hidden" name="" value=""/>
    
    html表单
    input select option optgroup textarea
    
    <select>
     <option value=""></option>
    </select>
    
    name multiple size
    selected value
    
    <textarea name="" rows="" cols="" >
    </textarea>
    
    name placeholder rows cols
    
    <form action="" method="" name="">
    </form>
    action method name targer enctype
    url get,post form_name _blank,_self,_parent,_top
    text/plain
    multipart/form-data

![image.png][image.png 1]

![image.png][image.png 2]

![image.png][image.png 3]

<!DOCTYPE html>
    <html>
    <head>
         
    <title>标题</title>
    </head>
    <body>
           
    </body>
    </html>

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

**作者简介**

**达叔**，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

感谢！承蒙关照！您真诚的赞赏是我前进的最大动力！

**这是一个有质量，有态度的公众号**

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容

![image][]

![image][image 1]

[HTML]: /images/20210724/a42435edc76147f68ac839a5b4e033f4.png
[image.png]: /images/20210724/bb4ed24d6f3b4712826adf52d0ccccb3.png
[image.png 1]: /images/20210724/f82245c389414e0aaf14ba8f8b960031.png
[image.png 2]: /images/20210724/38df518ca11d404d8f5e826c1affcd9c.png
[image.png 3]: /images/20210724/368d06af422b45219457ad01098dcad1.png
[image]: /images/20210724/3afa0693500147ab9167cd9eea93337f.png
[image 1]: /images/20210724/a8f4fe0e13a6473e8e52949ae742579f.png