html基础笔记

1、系统架构： B/S（浏览器/服务器）：规范、使用方便、本身实现成本低 C/S（客户端/服务器） 目前主流 2、HTML核心基础 网页：包含了文字，图片，视频，超链接等内容。

3、什么是HTML？ HTML：超文本标记语言（文字+图片+音视频+链接）

4、Web前端三项技术：（1）HTML:（web页面）尖括号包裹的关键词 （2）CSS:层叠样式表：设置元素的属性样式 （3）JavaScript：让元素具有动态效果

5、文件扩展名： win使用文件扩展名来区别文件的类型（点击查看，）

6、HTML标签： 标签都是在尖括号里包裹的，一般成对出现，有开始标签和结束标签，结束标签要加“/”来结束 （注释：选中需要注释的内容，快捷键按Ctrl+/添加注释，取消注释同样按Ctrl+/） （head里的 title：窗口的标题。） （boby里：页面上显示的文本、超链接、图片、音视频等。） （1）闭合标签（开始标签和结束标签）：如<html></html> （2）单标签/自关闭标签: 换行标签、<hr/>分割线 （3）文字标签：<font></font>（字体颜色、大小等属性） （4）h系列标签（标题标签）：h1-h6，从字体的大小、粗细、依次递减，h1最大，h6最小 （5）p标签（段落标签） （6）换行标签：</br> 7、HTML属性： 某一事物的特征。在html里属性是指标签的样式。 <标签 属性="属性值">内容</标签>，如：哈喽，酷狗！

8、补充：

​
math：可以避免页面中的乱码。 utf-8：包含全世界所有国家需要用到的字符。 gb2312：包含全部中文字符。

文本标签： b标签：粗体。内容 i标签：斜体。内容 u标签：下划线。内容

加粗：<strong>内容</strong>
斜体：<em>内容</em>

图片标签:img标签为单标签。 属性：src：指定要显示图片的地址 地址分为绝对地址或者相对地址 绝对地址：一般以http:// 或者ftp:// 或者系统盘符（c:）开头的地址 相对地址：相对于当前目录而言其他文件所在的地址,本地图片建议使用 相对地址中上一级目录（../） ,下一级目录(/) hight：高度 width：宽度

src:图片地址、alt：图片替代文字、title：鼠标悬停提示文字

超链接：使文本拥有跳转页面的功能，... 属性：href 指定要跳转的页面的地址（网络地址一般要有http:// 前缀）

特殊符号：

boby标签： bgcolor：背景色、background：背景图片 表格:table、border：边框 cellspacing：单元格之间的距离、cellpadding：单元格边框和内容之间的距离 行：tr、列：td*5+tab 5列快捷键 合并单元格：colspan="2"（合并两列） rowspan="2"(合并两行)、 表头：th.加粗加黑 thead、tbody

     有序列表：<ol><li>***</li></ol> 所有内容自动加序号排序
     无序列表：<ul><li></li></ul> 所有内容前显示的圆点  
代码部分：

<html>
    <head>
        <meta charset="utf-8" />
        <title>文本</title>
    </head>
    <body bgcolor="mediumvioletred" background="img/timg11.gif">
        <font color="blue" size="5" face="仿宋">哈喽，酷狗！</br></font>
        <font color="aliceblue"></font<><b>***</b>24日参加
        <strong>湖北代表团</strong>审议时，提出了<i>织牢织密公共卫生防护网的基本方针。</i>
        <em><u>疫情防控</u></em>中暴露的<u>“短板、漏洞、弱项”</u>，到底该
        <b><u>怎么补、怎么堵、怎么强？</u></b>这12个字中，蕴含了深刻思考。<br />
        <img src="img/timg.jpg" alt="图片加载失败" title="某某某" height="200"/>
        <a href="LZL1.html">LZL</a>
        &lt;&gt;你&nbsp;好&reg;&copy;&trade;&amp;</font>
        
       </body>
</html>

form表单：action指提交到哪里、method指明提交方式：post 登录、注册、上传
get 打开网页、搜索
input：type="text"用户名 placeholder输入框提示信息
type="password"密码
type="radio"性别 默认显示：checked
type="email" 邮箱格式要求提示
type="sumit" value="提交"
下拉选框：<select name="" size="">
<option value="编号">***</option>
type="reset" value="重置"
type="button" value="按钮文字"

代码部分：

<body>
        <form action="" method="">
            <p>用户名：<input type="text" name="usename"/></p>
            <p>密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="passwd"/></p>
            <p>确认密码：<input type="password" name="repasswd"/></p>
            <input type="submit" name="" value="注册"/>
            <input type="reset" name="" value="重置"/>
        </form>
        <ol>
            <li>课前预习</li>
            <li>课中听讲</li>
            <li>课后复习</li>
        </ol>
        <ul>
            <li>课前预习</li>
            <li>课中听讲</li>
            <li>课后复习</li>
        </ul>
    </body>
表格代码部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格</title>
    </head>
    <body>
        <table align="center" border="2px" cellpadding="15" cellspacing="5">
            <thead>
                <tr>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
                  <th >籍贯</th>
                </tr>
            </thead>
            <tbody align="center">
                <tr>
                  <td>小吕</td>
                  <td>男</td>
                  <td>24</td>
                  <td>陕西宝鸡</td>
                </tr>
                <tr>
                  <td>小王</td>
                  <td>男</td>
                  <td>26</td>
                  <td>陕西商洛</td>
                </tr>
                <tr>
                  <td>小李</td>
                  <td>女</td>
                  <td>22</td>
                  <td>陕西西安</td>
                </tr>
            </tbody>
            
        </table>
    </body>
</html>

 

​

 

posted @ 2020-06-02 17:04  时倾lzl  阅读(137)  评论(0)    收藏  举报