Cách viết văn bản trong html

Trong bài học này, bạn sẽ học cách sử dụng HTML để thêm văn bản và tiêu đề vào trang Web của mình. Bạn cũng sẽ học cách thêm các ký hiệu toán học, thông tin về trang Web của mình và các ký tự đặc biệt [chẳng hạn như dấu và]

Có thể bạn không nhận ra, nhưng bạn đã học cách tạo một đoạn HTML trong Bài 2, "Tạo trang đầu tiên của bạn. " Trong HTML, một đoạn văn được tạo bất cứ khi nào bạn chèn văn bản vào giữa

thẻ. Nhìn lại mã từ Bài 2



My XHTML Page


This is my first XHTML page.

Trình duyệt web thấy rằng bạn muốn có văn bản và chúng sẽ hiển thị văn bản đó. Các trình duyệt web không chú ý đến số lượng dòng trống bạn đặt trong văn bản của mình; . Trong mã HTML sau đây, bạn sẽ thấy một số dòng văn bản và thậm chí là một dòng trống, nhưng trình duyệt chỉ nhận ra các đoạn được bao quanh bởi dấu

thẻ [hoặc thẻ đoạn văn]. Các

thẻ yêu cầu trình duyệt thêm một dòng trống trước khi hiển thị bất kỳ văn bản nào theo sau nó, như thể hiện trong Hình 3. 1




Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

Hình 3. 1 Trình duyệt bỏ qua dòng trống mà tôi đã chèn và đặt dấu ngắt dòng trước

thay vào đó gắn thẻ

Trình duyệt web làm điều gì đó khác với văn bản đoạn văn mà bạn nên biết. Họ bọc văn bản ở cuối cửa sổ trình duyệt. Nói cách khác, khi văn bản trong trang Web của bạn đến mép của cửa sổ trình duyệt, nó sẽ tự động tiếp tục ở dòng tiếp theo bất kể bạn ở đâu.

được đặt. Các

luôn thêm một dòng trống, nhưng không phải lúc nào bạn cũng muốn có một dòng trống giữa các dòng văn bản. Đôi khi bạn chỉ muốn văn bản của mình xuất hiện ở dòng tiếp theo [chẳng hạn như dòng địa chỉ hoặc bài thơ]. Bạn có thể sử dụng một thẻ mới cho việc này—ngắt dòng hoặc thẻ
, như trong Hình 3. 2.

Hình 3. 2 cái


giúp phân tách văn bản của bạn thành các dòng và đoạn văn.

Thẻ mới này buộc trình duyệt di chuyển bất kỳ văn bản nào theo sau thẻ sang dòng tiếp theo của trình duyệt mà không cần thêm một dòng trống ở giữa. Hình 3. 3 trình bày cách trình duyệt sử dụng hai thẻ này để định dạng văn bản của bạn

Hình 3. 3 Trình duyệt chỉ chèn dấu ngắt dòng và dấu tách đoạn trống khi bạn đặt đúng thẻ HTML

Tôi muốn đưa


  
    Choose a username: 
    
  
  
    Submit
  

0 và

  
    Choose a username: 
    
  
  
    Submit
  

1 vào bên trong văn bản trong HTML nhưng tôi không thể vì HTML không hiểu đó là văn bản

Có cách nào để đưa các ký hiệu đó vào HTML dưới dạng văn bản và khiến trình soạn thảo hiểu được không?

Thí dụ

Thuộc tính


  
    Choose a username: 
    
  
  
    Submit
  

3 là một chuỗi chứa giá trị hiện tại của văn bản được nhập vào trường văn bản. Bạn có thể lấy cái này bằng cách sử dụng thuộc tính

  
    Choose a username: 
    
  
  
    Submit
  

4

  
    Choose a username: 
    
  
  
    Submit
  

3 trong JavaScript

let theText = myTextInput.value;

Nếu không có ràng buộc xác thực nào được áp dụng cho đầu vào [xem Xác thực để biết thêm chi tiết], giá trị có thể là một chuỗi rỗng [


  
    Choose a username: 
    
  
  
    Submit
  

6]

thuộc tính bổ sung

Ngoài các thuộc tính hoạt động trên tất cả các phần tử


  
    Choose a username: 
    
  
  
    Submit
  

1 bất kể loại của chúng, kiểu nhập văn bản hỗ trợ các thuộc tính sau


  
    Choose a username: 
    
  
  
    Submit
  

8

Các giá trị của thuộc tính danh sách là


  
    Choose a username: 
    
  
  
    Submit
  

9 của một phần tử



Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

10 nằm trong cùng một tài liệu.



Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

10 cung cấp danh sách các giá trị được xác định trước để đề xuất cho người dùng cho đầu vào này. Bất kỳ giá trị nào trong danh sách không tương thích với



Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

12 đều không được đưa vào các tùy chọn được đề xuất. Các giá trị được cung cấp là đề xuất, không phải yêu cầu. người dùng có thể chọn từ danh sách được xác định trước này hoặc cung cấp một giá trị khác




Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

13

Số ký tự tối đa [dưới dạng đơn vị mã UTF-16] mà người dùng có thể nhập vào đầu vào


  
    Choose a username: 
    
  
  
    Submit
  

2. Đây phải là một giá trị số nguyên 0 hoặc cao hơn. Nếu không có



Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

13 nào được chỉ định hoặc giá trị không hợp lệ được chỉ định, thì đầu vào

  
    Choose a username: 
    
  
  
    Submit
  

2 không có độ dài tối đa. Giá trị này cũng phải lớn hơn hoặc bằng giá trị của



Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

17

Đầu vào sẽ không xác thực được ràng buộc nếu độ dài của giá trị văn bản của trường lớn hơn




Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

13 đơn vị mã UTF-16 dài. Xác thực ràng buộc chỉ được áp dụng khi giá trị được thay đổi bởi người dùng




Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

17

Số ký tự tối thiểu [dưới dạng đơn vị mã UTF-16] mà người dùng có thể nhập vào đầu vào


  
    Choose a username: 
    
  
  
    Submit
  

2. Đây phải là một giá trị số nguyên không âm nhỏ hơn hoặc bằng giá trị được chỉ định bởi



Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

13. Nếu không có



Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

17 nào được chỉ định hoặc một giá trị không hợp lệ được chỉ định, thì đầu vào

  
    Choose a username: 
    
  
  
    Submit
  

2 không có độ dài tối thiểu

Dữ liệu nhập vào sẽ không xác thực được ràng buộc nếu độ dài của văn bản được nhập vào trường nhỏ hơn




Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

17 đơn vị mã UTF-16. Xác thực ràng buộc chỉ được áp dụng khi giá trị được thay đổi bởi người dùng

65

Thuộc tính

65, khi được chỉ định, là một biểu thức chính quy mà giá trị đầu vào

  
    Choose a username: 
    
  
  
    Submit
  

3 phải khớp để giá trị vượt qua xác thực ràng buộc. Nó phải là một biểu thức chính quy JavaScript hợp lệ, như được sử dụng bởi loại

68 và như được ghi lại trong hướng dẫn của chúng tôi về các biểu thức chính quy; . Không được chỉ định dấu gạch chéo lên xung quanh văn bản mẫu

Nếu mẫu đã chỉ định không được chỉ định hoặc không hợp lệ, thì không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn

Ghi chú. Sử dụng thuộc tính


  
    Choose a username: 
    
  
  
    Submit
  

10 để chỉ định văn bản mà hầu hết các trình duyệt sẽ hiển thị dưới dạng chú giải công cụ để giải thích những yêu cầu để khớp với mẫu. Bạn cũng nên bao gồm văn bản giải thích khác gần đó

Xem Chỉ định mẫu để biết thêm chi tiết và ví dụ


  
    Choose a username: 
    
  
  
    Submit
  

11

Thuộc tính


  
    Choose a username: 
    
  
  
    Submit
  

11 là một chuỗi cung cấp gợi ý ngắn gọn cho người dùng về loại thông tin được mong đợi trong trường. Nó phải là một từ hoặc cụm từ ngắn thể hiện loại dữ liệu dự kiến, chứ không phải là một thông báo giải thích. Văn bản không được bao gồm dấu xuống dòng hoặc xuống dòng

Nếu nội dung của điều khiển có một hướng [LTR hoặc RTL] nhưng cần hiển thị trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán hai chiều Unicode để ghi đè hướng trong trình giữ chỗ;

Note: Avoid using the


  
    Choose a username: 
    
  
  
    Submit
  

11 attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Placeholders are not accessible in : The Input [Form Input] element for more information.


  
    Choose a username: 
    
  
  
    Submit
  

14

Thuộc tính Boolean, nếu có, nghĩa là người dùng không thể chỉnh sửa trường này. Tuy nhiên,


  
    Choose a username: 
    
  
  
    Submit
  

3 của nó vẫn có thể được thay đổi bằng mã JavaScript trực tiếp đặt thuộc tính

  
    Choose a username: 
    
  
  
    Submit
  

4

  
    Choose a username: 
    
  
  
    Submit
  

3

Ghi chú. Vì trường chỉ đọc không thể có giá trị, nên


  
    Choose a username: 
    
  
  
    Submit
  

18 không có bất kỳ ảnh hưởng nào đối với đầu vào với thuộc tính

  
    Choose a username: 
    
  
  
    Submit
  

14 cũng được chỉ định


  
    Choose a username: 
    
  
  
    Submit
  

10

Thuộc tính


  
    Choose a username: 
    
  
  
    Submit
  

10 là một giá trị số cho biết độ rộng của trường nhập phải là bao nhiêu ký tự. Giá trị phải là một số lớn hơn 0 và giá trị mặc định là 20. Vì độ rộng ký tự khác nhau, điều này có thể chính xác hoặc không chính xác và không nên dựa vào đó;

Điều này không đặt giới hạn về số lượng ký tự mà người dùng có thể nhập vào trường. Nó chỉ xác định khoảng bao nhiêu có thể được nhìn thấy tại một thời điểm. Để đặt giới hạn trên cho độ dài của dữ liệu đầu vào, hãy sử dụng thuộc tính




Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

13


  
    Choose a username: 
    
  
  
    Submit
  

14


  
    Choose a username: 
    
  
  
    Submit
  

14 là một thuộc tính toàn cầu được sử dụng để cho biết có bật kiểm tra chính tả cho một phần tử hay không. Nó có thể được sử dụng trên bất kỳ nội dung có thể chỉnh sửa nào, nhưng ở đây chúng tôi xem xét các chi tiết cụ thể liên quan đến việc sử dụng

  
    Choose a username: 
    
  
  
    Submit
  

14 trên các phần tử

  
    Choose a username: 
    
  
  
    Submit
  

1. Các giá trị được phép cho

  
    Choose a username: 
    
  
  
    Submit
  

14 là


  
    Choose a username: 
    
  
  
    Submit
  

19

Vô hiệu hóa kiểm tra chính tả cho phần tử này


  
    Choose a username: 
    
  
  
    Submit
  

10

Bật kiểm tra chính tả cho thành phần này


  
    Choose a username: 
    
  
  
    Submit
  

6 [chuỗi trống] hoặc không có giá trị

Thực hiện theo hành vi mặc định của phần tử để kiểm tra chính tả. Điều này có thể dựa trên bối cảnh


  
    Choose a username: 
    
  
  
    Submit
  

14 của cha mẹ hoặc các yếu tố khác

Trường đầu vào có thể được bật kiểm tra chính tả nếu nó không có thuộc tính chỉ đọc được đặt và không bị tắt

Giá trị được trả về bằng cách đọc


  
    Choose a username: 
    
  
  
    Submit
  

14 có thể không phản ánh trạng thái kiểm tra chính tả thực tế trong một điều khiển, nếu tùy chọn của tác nhân người dùng ghi đè cài đặt

Thuộc tính không chuẩn

Các thuộc tính không chuẩn sau đây cũng có sẵn trên một số trình duyệt. Theo nguyên tắc chung, bạn nên tránh sử dụng chúng trừ khi không thể giúp được


  
    Choose a username: 
    
  
  
    Submit
  

14

Một tiện ích mở rộng của Safari, thuộc tính


  
    Choose a username: 
    
  
  
    Submit
  

14 là một chuỗi cho biết có kích hoạt hiệu chỉnh tự động hay không trong khi người dùng đang chỉnh sửa trường này. giá trị được phép là


  
    Choose a username: 
    
  
  
    Submit
  

16

Cho phép tự động sửa lỗi chính tả, cũng như xử lý thay thế văn bản nếu có được định cấu hình


  
    Choose a username: 
    
  
  
    Submit
  

17

Vô hiệu hóa tự động sửa và thay thế văn bản


  
    Choose a username: 
    
  
  
    Submit
  

18

Tiện ích mở rộng của Mozilla, cung cấp gợi ý về loại hành động nào sẽ được thực hiện nếu người dùng nhấn phím Enter hoặc Return trong khi chỉnh sửa trường

Thuộc tính này đã không được dùng nữa. thay vào đó hãy sử dụng thuộc tính toàn cầu


  
    Choose a username: 
    
  
  
    Submit
  

19

Sử dụng kiểu nhập văn bản

Các phần tử


  
    Choose a username: 
    
  
  
    Submit
  

1 thuộc loại

  
    Choose a username: 
    
  
  
    Submit
  

2 tạo đầu vào một dòng cơ bản. Bạn nên sử dụng chúng ở bất cứ nơi nào bạn muốn người dùng nhập giá trị một dòng và không có loại đầu vào cụ thể hơn để thu thập giá trị đó [ví dụ: nếu đó là ngày, URL, email hoặc cụm từ tìm kiếm, bạn'

Ví dụ cơ bản


  
    Choose a username: 
    
  
  
    Submit
  

Điều này ám chỉ như vậy

Khi được gửi, cặp tên/giá trị dữ liệu được gửi đến máy chủ sẽ là

let theText = myTextInput.value;
42 [nếu "Chris" được nhập làm giá trị đầu vào trước khi gửi]. Bạn phải nhớ bao gồm thuộc tính
let theText = myTextInput.value;
43 trên phần tử

  
    Choose a username: 
    
  
  
    Submit
  

1, nếu không, giá trị của trường văn bản sẽ không được bao gồm trong dữ liệu đã gửi

Đặt trình giữ chỗ

Bạn có thể cung cấp một trình giữ chỗ hữu ích bên trong kiểu nhập văn bản của mình để có thể cung cấp gợi ý về nội dung cần nhập bằng cách sử dụng thuộc tính


  
    Choose a username: 
    
  
  
    Submit
  

11. Nhìn vào ví dụ sau




Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

1

Bạn có thể xem cách trình giữ chỗ được hiển thị bên dưới

Trình giữ chỗ thường được hiển thị bằng màu sáng hơn màu nền trước của phần tử và tự động biến mất khi người dùng bắt đầu nhập văn bản vào trường [hoặc bất cứ khi nào trường có giá trị được đặt theo chương trình bằng cách đặt thuộc tính


  
    Choose a username: 
    
  
  
    Submit
  

3 của nó]

Kích thước phần tử đầu vào vật lý

Kích thước vật lý của hộp nhập liệu có thể được kiểm soát bằng thuộc tính


  
    Choose a username: 
    
  
  
    Submit
  

10. Với nó, bạn có thể chỉ định số lượng ký tự mà kiểu nhập văn bản có thể hiển thị tại một thời điểm. Điều này ảnh hưởng đến chiều rộng của phần tử, cho phép bạn chỉ định chiều rộng theo ký tự thay vì pixel. Ví dụ, trong ví dụ này, đầu vào rộng 30 ký tự

6

Thẩm định

Các phần tử


  
    Choose a username: 
    
  
  
    Submit
  

1 thuộc loại

  
    Choose a username: 
    
  
  
    Submit
  

2 không được áp dụng xác thực tự động cho chúng [vì kiểu nhập văn bản cơ bản cần có khả năng chấp nhận bất kỳ chuỗi tùy ý nào], nhưng có sẵn một số tùy chọn xác thực phía máy khách mà chúng ta sẽ thảo luận bên dưới

Ghi chú. Xác thực biểu mẫu HTML không thay thế cho tập lệnh máy chủ đảm bảo dữ liệu đã nhập ở định dạng phù hợp. Quá dễ dàng để ai đó thực hiện các điều chỉnh đối với HTML cho phép họ bỏ qua xác thực hoặc xóa hoàn toàn. Cũng có thể ai đó bỏ qua HTML của bạn hoàn toàn và gửi dữ liệu trực tiếp đến máy chủ của bạn. Nếu mã phía máy chủ của bạn không xác thực được dữ liệu mà nó nhận được, thảm họa có thể xảy ra khi dữ liệu được định dạng không đúng [hoặc dữ liệu quá lớn, không đúng loại, v.v.] được nhập vào cơ sở dữ liệu của bạn

Một lưu ý về phong cách

Có các lớp giả hữu ích có sẵn để tạo kiểu cho các phần tử biểu mẫu để giúp người dùng biết khi nào giá trị của chúng hợp lệ hoặc không hợp lệ. Đây là


  
    Choose a username: 
    
  
  
    Submit
  

10 và

  
    Choose a username: 
    
  
  
    Submit
  

11. Trong phần này, chúng ta sẽ sử dụng CSS sau, CSS này sẽ đặt dấu kiểm [đánh dấu] bên cạnh đầu vào chứa giá trị hợp lệ và dấu chéo [X] bên cạnh đầu vào chứa giá trị không hợp lệ


  
    Choose a username: 
    
  
  
    Submit
  

1

Kỹ thuật này cũng yêu cầu một phần tử


  
    Choose a username: 
    
  
  
    Submit
  

12 được đặt sau phần tử biểu mẫu, phần tử này hoạt động như một giá đỡ cho các biểu tượng. Điều này là cần thiết vì một số loại đầu vào trên một số trình duyệt không hiển thị các biểu tượng được đặt ngay sau chúng rất tốt

Yêu cầu đầu vào

Bạn có thể sử dụng thuộc tính


  
    Choose a username: 
    
  
  
    Submit
  

18 như một cách dễ dàng để nhập giá trị bắt buộc trước khi cho phép gửi biểu mẫu


  
    Choose a username: 
    
  
  
    Submit
  

1


  
    Choose a username: 
    
  
  
    Submit
  

1

Điều này ám chỉ như vậy

Nếu bạn cố gắng gửi biểu mẫu mà không nhập cụm từ tìm kiếm vào đó, trình duyệt sẽ hiển thị thông báo lỗi

Độ dài giá trị đầu vào

Bạn có thể chỉ định độ dài tối thiểu [bằng ký tự] cho giá trị đã nhập bằng thuộc tính




Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

17;

Ví dụ bên dưới yêu cầu giá trị đã nhập có độ dài từ 4–8 ký tự

let theText = myTextInput.value;
4


  
    Choose a username: 
    
  
  
    Submit
  

1

Điều này ám chỉ như vậy

Nếu cố gửi biểu mẫu có ít hơn 4 ký tự, bạn sẽ nhận được thông báo lỗi thích hợp [thông báo lỗi này khác nhau giữa các trình duyệt]. Nếu bạn cố gắng nhập nhiều hơn 8 ký tự, trình duyệt sẽ không cho phép bạn

Ghi chú. Nếu bạn chỉ định một




Typing Paragraphs in HTML


This is the first line. But is this the second?

No, this is.

17 nhưng không chỉ định

  
    Choose a username: 
    
  
  
    Submit
  

18, đầu vào được coi là hợp lệ vì người dùng không bắt buộc phải chỉ định một giá trị

Chỉ định một mẫu

Bạn có thể sử dụng thuộc tính

65 để chỉ định một biểu thức chính quy mà giá trị đã nhập phải khớp để được coi là hợp lệ [xem Xác thực dựa trên biểu thức chính quy để biết khóa học cấp tốc đơn giản về cách sử dụng biểu thức chính quy để xác thực đầu vào]

Ví dụ bên dưới giới hạn giá trị ở 4-8 ký tự và yêu cầu giá trị đó chỉ chứa các chữ cái viết thường


  
    Choose a username: 
    
  
  
    Submit
  

8


  
    Choose a username: 
    
  
  
    Submit
  

0

Điều này ám chỉ như vậy

ví dụ

Bạn có thể xem các ví dụ hay về kiểu nhập văn bản được sử dụng trong ngữ cảnh trong bài viết Biểu mẫu HTML đầu tiên của bạn và Cách cấu trúc một biểu mẫu HTML

Làm cách nào để chèn văn bản vào HTML?

Thẻ . Thẻ

Bạn có thể định dạng văn bản trong HTML không?

HTML cung cấp cho chúng tôi khả năng định dạng văn bản mà không cần sử dụng CSS. Có nhiều thẻ định dạng trong HTML. Các thẻ này được sử dụng để làm cho văn bản được in đậm, in nghiêng hoặc gạch chân. Có gần 14 tùy chọn có sẵn về cách văn bản xuất hiện trong HTML và XHTML

Chủ Đề