HTML

最新推荐文章于 2024-06-07 18:11:32 发布

戴戴0204

最新推荐文章于 2024-06-07 18:11:32 发布

阅读量274

点赞数

本文链接：https://blog.csdn.net/qq_24135817/article/details/80802798

版权

javaee 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一：相关概念

1.什么是html？

答：超文本标记语言。

超文本：文字，图片，音频，视频，链接，绘图等

html是标记语言：编程语言（包括类型，运算符，流程控制等）；标记语言（由标签组成：写html文档就是在写标签）

2.什么是HTTP？

答：超文本传输协议，用于浏览器和服务器端html文档传输的应用层协议。http协议是明文传输。默认使用端口是80

3.什么是https

相对于http，需要ssl证书：验证服务器端和实现数据的加密。默认端口是443

二：HTML基本语法

1.如何书写html文档

html/shtml/Html 结尾的

2.标签书写规范

通过尖括号家关键词组成；
标签必须成对存在，包括开始标签和结束标签 ;
标签允许正确嵌套 ,有且只有一个根标签
标签内部可以写属性（属性是对标签的描述），在开始标签书写。
标签对大小写不敏感，但是建议使用小写

3.示例

<html>
    <!-- 头标签:大多不可用，主要用于约束和描述 -->
    <head>
    <!-- 标题 -->
    <title> hhhhh</title>
    </head>
    <!-- 正文标签 -->
    <body>
    aa
    </body>

</html>

4.编写工具

Dreamweaver，webstorm，sublime，hbuilder

三：HTML常见标签

1.标题标签：用于强调重要程度，h1-h6有不同加粗和字体变大的效果，独占一行

2.P标签:段落标签

有换行效果。

3.Br标签:折行

空标签:

4.Hr标签:水平线

默认同窗口同宽

5.链接标签:a标签

Href属性: 链接位置 # /本地文件/网络文件url

<!--网络资源-->
    <a href="http://www.baidu.com">百度</a>
    <!--1.绝对路径     2.相对路径-->
    <a href="../index2.html">本地文件</a>

Target: 目标链接资源的打开方式(默认在当前窗口打开)

_self:  当前窗口打开
_blank: 新窗口打开
_parent: 在父窗口打开
_top: 在顶级窗口打开

锚链接: 实现网页内部跳转

<a href="#p1">跳转到p</a>
<!--id是标签的唯一标识-->
<p id="p1">跳转的位置</p>

5.锚链接：实现网页内部跳转

6.图片标签

Src:图片资源的路径(本地文件，网络资源)
Alt:图片加载失败用于提示说明文字。
Title:鼠标悬停用于说明。
Width:调整宽度   单位:px  像素
Height:高度

7.列表标签

无序列表
UL：无序列表
Li：列表项
有序列表
OL:
li:
自定义列表
DL:自定义列表
Dt：自定义列表项
Dd：列表项说明

<ul>
            <li>天猫</li>
            <li>天猫超市</li>
            <li>聚划算</li>
        </ul>

        <ol>
            <li>我们不一样</li>
            <li>无问西东</li>
            <li>红颜旧</li>
        </ol>

        <dl>
            <dt>亚瑟</dt>
            <dd>战士,出红莲斗篷</dd>
            <dt>妲己</dt>
            <dd>法师,出不知道</dd>
        </dl>

8.表格标签

Table:表格
tr：行
td：单元格
Colspan:跨列
Rowspan:跨行

<!--cellpadding:单元格内边距  单元格内容和边框之间的距离-->
        <table border="1" cellspacing="0" cellpadding="5">
            <tr>
                <td colspan="2">第一格</td>
                <td>第三格</td>
            </tr>
            <tr>
                <td rowspan="2">第一格</td>
                <td>第二格</td>
                <td>第三格</td>
            </tr>
            <tr>
                <td>第二格</td>
                <td>第三格</td>
            </tr>
        </table>

Thead：头部信息
Tbody: 正文信息
Tfoot: 小计等总结信息

9.表单

form
Action：动作，服务器端的路径
Method：请求方式

input表单项

Input: 表单项

Type: 区分表单项的显示格式
        Text:文本输入框(单行)
        Password:密码框
        Button:按钮
        Submit:带有提交功能的按钮
        Reset:重置
Radio:单选
Checkbox:多选
Value: 值(显示值,提交给服务器的值)
Name: 表单项的名称(相当于key),需要传递给服务器端的选项必须有name值。
Checked:选中状态

Select标签:下拉框
Option:下拉选项

<form action="#" method="get">
            用户名:<input type="text" name="username" /><br/>
            密码:<input type="password" name="password"/><br />
            性别:<input type="radio" name="sex" checked="checked" value="man"/>男
                <input type="radio" name="sex" value="woman"/>女<br />
            多选:
                <input type="checkbox" name="hobby" value="book"/>看书
                <input type="checkbox" name="hobby" value="movie"/>看电影
            <!--<input type="button" value="登录"/>-->
            省份:
                <select name="city">
                    <option value="bj">北京市</option>
                    <option value="sh">上海市</option>
                </select><br />
                <textarea rows="10" cols="10"></textarea>
                <input type="file" name="file" />
            <input type="submit" value="登录"/>
            <input type="reset" />
        </form>

10.div

div作为容器和css结合用于页面的布局。div默认宽带和窗口一致，高度默认为0.div是一个块级元素，不与其他元素共享一行

11.span

span是一个内联元素，经常放置一些文本信息，用于做标记。

12.实体

空格&nbsp等

戴戴0204

关注

0
点赞
踩
2

收藏

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

一：相关概念1.什么是html？答：超文本标记语言。超文本：文字，图片，音频，视频，链接，绘图等html是标记语言：编程语言（包括类型，运算符，流程控制等）；标记语言（由标签组成：写html文档就是在写标签）2.什么是HTTP？答：超文本传输协议，用于浏览器和服务器端html文档传输的应用层协议。http协议是明文传输。默认使用端口是803.什么是https...
复制链接

扫一扫